import React, { useState } from 'react';
import { useMutation, useQuery } from '@apollo/client';
import { Button as MaterialButton } from '@material-ui/core';
import {
  Box,
  Button,
  CheckboxDeprecated,
  CheckboxGroupDeprecated,
  Col,
  Confirmation,
  PaymentFooter,
  Text,
} from '@nova-hf/ui';
import DateSVG from 'assets/svg/date.svg';
import { CANCEL_SUBSCRIPTION } from 'graphql/mutations/subscription';
import { SUBSCRIPTION } from 'graphql/queries/subscription';
import { inject, observer } from 'mobx-react';
import { useRouter } from 'next/router';
import { withSnackbar, WithSnackbarProps } from 'notistack';
import { CancelSubscriptionInput } from 'typings/graphql';
import { isStringPhoneNumber } from 'utils/helpers';
import { WithTranslation, withTranslation } from 'utils/i18n';
interface IConfirmSubscriptionCancelProps extends WithTranslation, WithSnackbarProps {
  change?: any;
  authentication?: any;
  color: string;
  subscriptionId: string;
  selectedItem: any;
  ssn: string;
}

const ConfirmSubscriptionCancel = ({
  change: { resetChangeFlow, reason, reasonDescription, terminationDate },
  t,
  color,
  subscriptionId,
  authentication,
  ssn,
  enqueueSnackbar,
  closeSnackbar,
}: IConfirmSubscriptionCancelProps) => {
  const [errorMessage, setErrorMessage] = useState('');
  const [keepFiber, setKeepFiber] = useState<boolean | undefined>(undefined);

  const [cancelSubscription, { loading }] = useMutation(CANCEL_SUBSCRIPTION);
  const router = useRouter();

  const { data: dataSubscription } = useQuery(SUBSCRIPTION, {
    variables: { subscriptionId, accountInput: authentication.accountInput },
  });
  const subscriptionTitle = dataSubscription?.me?.profiles[0]?.title;
  const isPhoneNumber = isStringPhoneNumber(subscriptionTitle);
  const rateplanTitle = dataSubscription?.me?.profiles?.[0]?.rateplan?.title;
  const usedTitle = isPhoneNumber ? rateplanTitle?.toLowerCase() : subscriptionTitle;
  const hasFilledSeats = !!dataSubscription?.me?.profiles?.[0]?.connections?.length;
  const hasFiber =
    hasFilledSeats &&
    !!dataSubscription?.me?.profiles?.[0]?.connections?.find((item) => item.type === 'Internet');
  const action = (key: any) => {
    return (
      <MaterialButton
        onClick={() => {
          closeSnackbar(key);
        }}
      >
        {t('common:notification.dismiss')}
      </MaterialButton>
    );
  };

  const onSubmit = async () => {
    const input: CancelSubscriptionInput = {
      subscriptionId,
      reason,
      description: reasonDescription,
      ...(isPhoneNumber && { cancelAt: terminationDate }),
      terminateInternet: keepFiber || typeof keepFiber === 'undefined' ? false : true,
    };

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

      if (res.data.cancelSubscription.error) {
        throw new Error(res.data.cancelSubscription.error.message);
      } else {
        resetChangeFlow();
        onMessage(t('common:notification.success'), 'success');

        router.push(`/${ssn}/thjonustur`).then(() => window.scrollTo(0, 0));
      }
    } catch (e) {
      setErrorMessage(
        t('steps.confirmation.error', { error: e.message, subscriptionTitle: usedTitle }),
      );
      onMessage(
        t('steps.confirmation.error', { error: e.message, subscriptionTitle: usedTitle }),
        'error',
      );
    }
  };

  const onMessage = (
    message: string,
    variant: 'default' | 'error' | 'success' | 'warning' | 'info',
  ) => {
    enqueueSnackbar(message, {
      variant,
      action: (key) => action(key),
    });

    if (variant === 'error') setErrorMessage(message);
  };

  return (
    <Col col={6} push={3} base={12}>
      <Confirmation
        title={t('steps.confirmation.heading')}
        description={
          isPhoneNumber
            ? t('steps.confirmation.phoneNumberInfo', { subscriptionTitle: usedTitle })
            : t('steps.confirmation.info', { subscriptionTitle: usedTitle })
        }
        icon={<DateSVG />}
        errorMessage={errorMessage}
      />
      {hasFiber && (
        <Box display="flex" flexDirection="column" marginTop={5} marginX={7}>
          <Text variant="pLargeRegular" marginBottom={2}>
            {t('fiber.title')}
          </Text>
          <CheckboxGroupDeprecated radio name="fiber" color={color} listDirection="column" spacing>
            <CheckboxDeprecated
              key={'keep-fiber'}
              name="cancelOrKeepFiber"
              value={keepFiber}
              type="radio"
              defaultChecked={typeof keepFiber !== 'undefined' && keepFiber}
              onChange={() => setKeepFiber(true)}
            >
              {t('fiber.keepFiber')}
            </CheckboxDeprecated>
            <CheckboxDeprecated
              key={'remove-fiber'}
              name="cancelOrKeepFiber"
              value={t('fiber.cancelFiber')}
              type="radio"
              defaultChecked={typeof keepFiber !== 'undefined' && !keepFiber}
              onChange={() => setKeepFiber(false)}
            >
              {t('fiber.cancelFiber')}
            </CheckboxDeprecated>
          </CheckboxGroupDeprecated>
        </Box>
      )}
      <PaymentFooter>
        <Button
          disabled={typeof keepFiber === 'undefined' && hasFiber}
          background={color}
          loading={loading}
          onClick={() => {
            onSubmit();
          }}
        >
          {t('steps.confirmation.button')}
        </Button>
      </PaymentFooter>
    </Col>
  );
};

export default inject(
  'change',
  'authentication',
)(observer(withTranslation('cancel')(withSnackbar(ConfirmSubscriptionCancel))));