import React from 'react';
import { useMutation, useQuery } from '@apollo/client';
import { Box, Col, EmptyMessage, LoadingPlaceholder, PaymentSection, Row } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
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 {
  useMobileCommunicationSettingsMutation,
  useMobileServiceSettingsQuery,
} from '../../../typings/graphql';
import Settings from '../containers/settings/Settings';

import { ServiceSettings } from './components/service-settings';
import { ToggleSetting } from './containers/components/ToggleSetting';
import { ToggleSettingLoading } from './containers/components/ToggleSettingLoading';
interface IStillingarProps {
  query?: any;
  ui?: UI;
  subscriptionId: string;
  authentication?: Authentication;
}

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

  const { t } = useTranslation(['stillingar', 'settings']);
  const { enqueueSnackbar } = useSnackbar();
  const [toggleSetting] = useMutation(TOGGLE_SETTING);
  const { loading, error, data } = useQuery<IUserData>(PROFILE_SETTINGS, {
    variables: { accountInput, subscriptionId },
  });
  const isFiber = data?.me?.profiles[0].rateplan.typeId === 'fiber';
  const subscriptionGuid = data?.me?.profiles[0]?.subscriptionGuid;
  const { data: settingsData, refetch: settingsRefetch } = useMobileServiceSettingsQuery({
    variables: {
      mobileServiceId: subscriptionGuid ?? '',
    },
    skip: !subscriptionGuid,
  });

  const [toggleCommunicationSetting] = useMobileCommunicationSettingsMutation({
    onCompleted() {
      settingsRefetch();
    },
  });

  const communicationSettings = [
    {
      on: settingsData?.mobileService?.isAdvertisingAllowed,
      title: t('settings:communication.adverts'),
      description: t('settings:communication.advertsDescription'),
      id: 'isAdvertisingAllowed',
    },
    {
      on: settingsData?.mobileService?.isBirthdayToneAllowed,
      title: t('settings:communication.birthday'),
      description: t('settings:communication.birthdayDescription'),
      id: 'isBirthdayToneAllowed',
    },
    {
      on: settingsData?.mobileService?.isDirectMarketingAllowed,
      title: t('settings:communication.banned'),
      description: t('settings:communication.bannedDescription'),
      id: 'isDirectMarketingAllowed',
    },
    {
      on: settingsData?.mobileService?.isNotifyExcessUsageOneDayAllowed,
      title: t('settings:communication.usage'),
      description: t('settings:communication.usageDescription'),
      id: 'isNotifyExcessUsageOneDayAllowed',
    },
  ];

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

  if (loading) {
    return (
      <Settings subscriptionId={subscriptionId}>
        <Row>
          {isFiber ? (
            <Col col={12}>
              <Box paddingY={2} width="100%">
                <Box marginX={{ sm: 0, md: 5 }} marginBottom={4}>
                  <LoadingPlaceholder height={9} width="100%" />
                </Box>
                <Box marginX={{ sm: 0, md: 5 }} marginBottom={4}>
                  <LoadingPlaceholder height={9} width="100%" />
                </Box>
                <Box marginX={{ sm: 0, md: 5 }} marginBottom={4}>
                  <LoadingPlaceholder height={9} width="100%" />
                </Box>
              </Box>
            </Col>
          ) : (
            <PaymentSection smallerTitle fullWidth noSpacingTop title={t('general.title')}>
              <ToggleSettingLoading />
              <ToggleSettingLoading />
              <ToggleSettingLoading />
            </PaymentSection>
          )}
        </Row>
      </Settings>
    );
  }
  if (
    error ||
    !data?.me?.profiles[0] ||
    (data?.me?.profiles[0].settings?.length === 0 && !isFiber) // 💩
  ) {
    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',
      });
    }
  };

  const onToggleCommunicationSetting = async (id: string, on: boolean) => {
    if (id === 'isAdvertisingAllowed') {
      try {
        await toggleCommunicationSetting({
          variables: {
            input: { subscriptionGuid: subscriptionGuid ?? '', isAdvertisingAllowed: !on },
          },
        });
        enqueueSnackbar(t('settings:communication.success'), {
          variant: 'success',
        });
      } catch (error) {
        enqueueSnackbar('Breyting tókst ekki', {
          variant: 'error',
        });
      }
    }
    if (id === 'isBirthdayToneAllowed') {
      try {
        await toggleCommunicationSetting({
          variables: {
            input: { subscriptionGuid: subscriptionGuid ?? '', isBirthdayToneAllowed: !on },
          },
        });
        enqueueSnackbar(t('settings:communication.success'), {
          variant: 'success',
        });
      } catch (error) {
        enqueueSnackbar(t('settings:communication.error'), {
          variant: 'error',
        });
      }
    }
    if (id === 'isNotifyExcessUsageOneDayAllowed') {
      try {
        await toggleCommunicationSetting({
          variables: {
            input: {
              subscriptionGuid: subscriptionGuid ?? '',
              isNotifyExcessUsageOneDayAllowed: !on,
            },
          },
        });
        enqueueSnackbar(t('settings:communication.success'), {
          variant: 'success',
        });
      } catch (error) {
        enqueueSnackbar(t('settings:communication.error'), {
          variant: 'error',
        });
      }
    }
    if (id === 'isDirectMarketingAllowed') {
      try {
        await toggleCommunicationSetting({
          variables: {
            input: { subscriptionGuid: subscriptionGuid ?? '', isDirectMarketingAllowed: !on },
          },
        });
        enqueueSnackbar(t('settings:communication.success'), {
          variant: 'success',
        });
      } catch (error) {
        enqueueSnackbar(t('settings:communication.error'), {
          variant: 'error',
        });
      }
    }
  };

  return (
    <Settings subscriptionId={subscriptionId}>
      <Row>
        <Col col={12}>
          {isFiber && (
            <ServiceSettings
              color={profileColor(data?.me?.profiles[0]?.rateplan) as MainColorType}
              subscriptionId={subscriptionId}
              authentication={authentication}
            />
          )}

          {settings
            ?.filter(
              (s) =>
                s.settingId !== 'ENABLESMSALERTWHENDATALOW' &&
                s.settingId !== 'INTERNETABROAD' &&
                s.settingId !== 'FOREIGNROAMING' &&
                s.settingId !== 'ENABLE_UPSELL_MOBILE_DATA' &&
                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)}
              />
            ))}
          {communicationSettings?.map((setting, index) => (
            <ToggleSetting
              key={index}
              title={setting.title}
              description={setting.description}
              value={setting.on ?? false}
              onToggle={() => onToggleCommunicationSetting(setting.id, setting.on ?? false)}
            />
          ))}
        </Col>
      </Row>
    </Settings>
  );
};

Stillingar.getInitialProps = ({ query }: IStillingarProps) => {
  const { subscriptionId } = query;

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

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