import React, { useEffect, useState } from 'react';
import { Box, MainButton, NumberInput } from '@nova-hf/ui';
import { inject } from 'mobx-react';
import { useSnackbar } from 'notistack';
import Authentication from 'store/authentication';
import UI from 'store/ui';
import { useAddOrChangeCallForwardingMutation, useCallForwardingQuery } from 'typings/graphql';
import { useTranslation } from 'utils/i18n';

import Settings from '../../containers/settings/Settings';
import { ToggleSetting } from '../containers/components/ToggleSetting';

interface AframsendingProps {
  subscriptionId: string;
  ui?: UI;
  authentication?: Authentication;
}

const Aframsending = ({ subscriptionId, authentication, ui }: AframsendingProps) => {
  if (!authentication) return null;

  const { t } = useTranslation('stillingar');
  const { enqueueSnackbar } = useSnackbar();

  const { data, error, refetch } = useCallForwardingQuery({
    variables: { input: { subscriptionId: subscriptionId } },
  });

  const isOn = data?.callForwarding?.isActive ?? false;
  const currentNumber = data?.callForwarding?.forwardingTo ?? '';
  const [on, setOnOff] = useState(isOn);
  const [number, setNumber] = useState(currentNumber);

  const [toggle] = useAddOrChangeCallForwardingMutation({
    onCompleted() {
      refetch();
    },
  });

  useEffect(() => {
    setOnOff(isOn);
    setNumber(currentNumber);
  }, [isOn, currentNumber]);

  if (error || !data) {
    return (
      <Settings subscriptionId={subscriptionId}>
        <div>{t('callForwarding.couldNotFetch')}</div>
      </Settings>
    );
  }

  const onSubmitButton = async () => {
    const takeCareOfNumberIfOff = !on && number === currentNumber ? '' : number;
    try {
      await toggle({
        variables: { input: { forwardingTo: takeCareOfNumberIfOff, isActive: on, subscriptionId } },
      });
      enqueueSnackbar(t('general.message.success'), {
        variant: 'success',
      });
    } catch (e: any) {
      enqueueSnackbar(t('general.message.error', { error: e.message }), {
        variant: 'error',
      });
    }
  };

  return (
    <Settings subscriptionId={subscriptionId}>
      <ToggleSetting
        title={t('callForwarding.title')}
        description={t('callForwarding.description')}
        value={on}
        onToggle={() => setOnOff(!on)}
      />
      <Box marginX={2}>
        {on && (
          <NumberInput
            name="phoneNumber"
            id="phonNumberId"
            label={t('callForwarding.phoneNumber')}
            numberType="number"
            color="black100"
            icon="phone"
            value={number}
            onChange={(value) => setNumber(value)}
          />
        )}
        {(on || (!on && data?.callForwarding?.forwardingTo)) && (
          <Box marginLeft="auto" width={'6/12'} marginTop={3}>
            <MainButton
              colorScheme={ui?.pageColor ?? 'black100'}
              text={t('callForwarding.change')}
              isDisabled={on && number === currentNumber}
              onClick={onSubmitButton}
            />
          </Box>
        )}
      </Box>
    </Settings>
  );
};

Aframsending.getInitialProps = ({ query }: any) => {
  return {
    subscriptionId: query.subscriptionId,
    namespacesRequired: ['stillingar'],
  };
};

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