import React from 'react';
import { useMutation, useQuery } from '@apollo/client';
import { Box, Col, EmptyMessage, MainButton, PaymentSection, Row } from '@nova-hf/ui';
import { TOGGLE_SETTING } from 'graphql/mutations/settings';
import { PROFILE_SETTINGS } from 'graphql/queries/settings';
import { inject } from 'mobx-react';
import { useSnackbar } from 'notistack';
import Authentication from 'store/authentication';
import UI from 'store/ui';
import { ISetting, IUserData } from 'typings';
import { profileColor } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';

import Settings from '../../containers/settings/Settings';

import { ToggleSetting } from './../containers/components/ToggleSetting';
import { ToggleSettingLoading } from './../containers/components/ToggleSettingLoading';

interface IUtlondProps {
  query?: any;
  ui?: UI;
  authentication?: Authentication;
  subscriptionId: string;
}

const Utlond = ({ ui, subscriptionId, authentication }: IUtlondProps) => {
  if (!authentication) {
    return false;
  }
  const { accountInput } = authentication;

  const { t } = useTranslation('stillingar');
  const { enqueueSnackbar } = useSnackbar();
  const [toggleSetting] = useMutation(TOGGLE_SETTING);
  const { loading, error, data } = useQuery<IUserData>(PROFILE_SETTINGS, {
    variables: { accountInput, subscriptionId },
  });

  if (data?.me?.profiles[0]?.rateplan) {
    ui?.setPageColor(profileColor(data?.me?.profiles[0]?.rateplan));
  }

  if (loading) {
    return (
      <Settings subscriptionId={subscriptionId}>
        <Row>
          <PaymentSection smallerTitle fullWidth noSpacingTop title={t('general.title')}>
            <ToggleSettingLoading />
            <ToggleSettingLoading />
            <ToggleSettingLoading />
          </PaymentSection>
        </Row>
      </Settings>
    );
  }
  if (error || !data?.me?.profiles[0]) {
    return (
      <Settings subscriptionId={subscriptionId}>
        <Row>
          <EmptyMessage
            title={t('general.noSettings')}
            description={t('general.noSettingsDescription')}
          />
        </Row>
      </Settings>
    );
  }

  const {
    me: { profiles },
  } = data;
  const { settings } = profiles[0];

  const onToggle = async (id: string) => {
    const index = settings.findIndex((s) => s.settingId === id);
    const on = settings[index].on;

    settings[index].on = !on;

    const payload = {
      subscriptionId,
      settingId: id,
      on: !on,
    };

    try {
      const res = await toggleSetting({ variables: { input: payload } });

      settings[index] = res?.data?.updateSetting?.setting;
      enqueueSnackbar(t('general.message.success'), {
        variant: 'success',
      });
    } catch (e: any) {
      settings[index].on = on;
      enqueueSnackbar(t('general.message.error', { error: e.message }), {
        variant: 'error',
      });
    }
  };

  return (
    <Settings subscriptionId={subscriptionId}>
      <Row>
        <Col col={12}>
          {settings
            ?.filter(
              (s) =>
                s.settingId === 'ENABLESMSALERTWHENDATALOW' ||
                s.settingId === 'INTERNETABROAD' ||
                s.settingId === 'FOREIGNROAMING' ||
                s.settingId === 'ROAMINGGPRS' ||
                s.settingId === 'ROAMINGZONE35' ||
                s.settingId == 'CALLICELANDTOABROAD' ||
                s.settingId === 'FERDAPAKKI',
            )
            .map(({ settingId, title, statusText, on }: ISetting) => (
              <ToggleSetting
                key={settingId}
                title={title}
                description={statusText}
                value={on}
                onToggle={() => onToggle(settingId)}
              >
                {settingId === 'FOREIGNROAMING' && (
                  <Box width={['10/12', '8/12', '5/12', '4/12']}>
                    <MainButton
                      renderAs="a"
                      text="Skoða verðskrá"
                      icon="longArrowRight"
                      href="https://www.nova.is/farsimi/utlond"
                      openInNewTab
                      colorScheme="white"
                      dottedShadow="none"
                    />
                  </Box>
                )}
              </ToggleSetting>
            ))}
        </Col>
      </Row>
    </Settings>
  );
};

Utlond.getInitialProps = ({ query }: IUtlondProps) => {
  const { subscriptionId } = query;

  return {
    subscriptionId,
    namespacesRequired: ['common', 'stillingar'],
  };
};

export default inject('ui', 'authentication')(Utlond);