import React, { useState } from 'react';
import { Box, ErrorMessage, MainButton, ModalDeprecated as Modal, Text } from '@nova-hf/ui';
import { useSnackbar } from 'notistack';
import { Subscription, useCancelSubscriptionMutation } from 'typings/graphql';
import { formatDate } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';

import s from './CancelChannelSubscription.module.scss';
interface ICancelChannelSubscriptionProps {
  subscription: Subscription | undefined;
  refetch: () => void;
}

const CancelChannelSubscription = ({ subscription, refetch }: ICancelChannelSubscriptionProps) => {
  const { t } = useTranslation('subscription');
  const { enqueueSnackbar } = useSnackbar();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');

  const [cancelSubscription, { loading, data, error }] = useCancelSubscriptionMutation();

  const cancel = async (sub: Subscription) => {
    try {
      const res = await cancelSubscription({
        variables: {
          input: {
            subscriptionId: sub.id,
            reason: '',
          },
        },
      });

      refetch();

      if (res.data?.cancelSubscription?.error) {
        setErrorMessage(res.data.cancelSubscription.error.message);
      } else {
        enqueueSnackbar(t('novaTv.cancelChannel.success'), {
          variant: 'success',
        });
        setIsModalOpen(false);
      }
    } catch (e) {
      setErrorMessage(t('novaTv.cancelChannel.error'));
    }
  };

  if (!subscription || error) {
    return (
      <Box padding="8" display="flex" flexDirection="column" gap="medium" placeItems="center">
        <Text variant="pMediumRegular">{t('novaTv.cancelChannel.error')}</Text>
      </Box>
    );
  }

  return (
    <>
      <Box
        className={s.container}
        padding="4"
        display="flex"
        flexDirection={{ sm: 'column', md: 'row' }}
        boxShadow="normal"
      >
        <Box display="flex" flexDirection="column">
          <h2 className={s.heading}>{t('novaTv.cancelSubscription')}</h2>
          {subscription.cancelAt ? (
            <Text variant="pSmallRegular">
              {t('novaTv.cancelChannel.alreadyCanceledInfo', {
                cancelAtDate: formatDate(subscription.cancelAt as Date, 'd. MMMM yyyy'),
              })}
            </Text>
          ) : (
            <Text variant="pSmallRegular">
              {t('novaTv.cancelChannel.beforeCancelInfo', {
                periodEndDate: formatDate(subscription.currentPeriodEnd as Date, 'd. MMMM yyyy'),
              })}
            </Text>
          )}
        </Box>
        <Box
          className={s.cancelButtonContainer}
          paddingTop={{ sm: '4', md: '0' }}
          display="flex"
          flexDirection="column"
          placeItems="flex-end"
        >
          <MainButton
            colorScheme={'pink'}
            text={t('novaTv.cancelSubscription')}
            dottedShadow="none"
            isLoading={loading}
            isDisabled={!!subscription.cancelAt}
            onClick={() => {
              setIsModalOpen(true);
            }}
          />
        </Box>
      </Box>

      <Modal active={isModalOpen} closeModal={() => setIsModalOpen(false)}>
        <Box padding="4" display="flex" flexDirection="column" gap="large" placeItems="center">
          <Text variant="h6">
            {t('novaTv.cancelChannel.title', {
              subscriptionTitle: subscription.plan.product.title,
            })}
          </Text>
          <Text variant="pMediumRegular">
            {t('novaTv.cancelChannel.info', {
              periodEndDate: formatDate(subscription.currentPeriodEnd as Date, 'd. MMMM yyyy'),
            })}
          </Text>
          {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
          <MainButton
            colorScheme={'pink'}
            text={t('novaTv.cancelChannel.confirm')}
            dottedShadow="none"
            isLoading={loading}
            onClick={() => cancel(subscription)}
          />
        </Box>
      </Modal>
    </>
  );
};

export { CancelChannelSubscription };