import React, { useState } from 'react';
import { MainButton, Text, Box, Icon, ErrorMessage } from '@nova-hf/ui';
import { MainColorType, GreyScaleColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { formatDate } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';
import { IconType } from '@nova-hf/ui/umd/ts/src/icon-library/iconMap';
import { usePostponePeriodMutation } from 'typings/graphql';

import { useSnackbar } from 'notistack';

type PeriodInfo = {
  periodId: string;
  subscriptionId: string;
  icon: IconType;
  iconColor: MainColorType | GreyScaleColorType;
  infoTitle: string;
  postponeUntilDate?: Date;
  currentDueDate?: Date;
};
type IPostponePayment = {
  title: string;
  description: string;
  notice?: string;
  color: MainColorType;
  periodInfo: PeriodInfo;
  onCompleted: () => void;
};

export const PostponePayment = ({
  title,
  description,
  notice,
  color,
  periodInfo,
  onCompleted,
}: IPostponePayment) => {
  const { t } = useTranslation('subscription');
  const { enqueueSnackbar } = useSnackbar();

  const [errorMessage, setErrorMessage] = useState('');
  const [postponePeriod, { loading }] = usePostponePeriodMutation();

  const performPostponement = async () => {
    try {
      const { data } = await postponePeriod({
        variables: {
          input: {
            subscriptionId: periodInfo.subscriptionId,
          },
        },
      });

      if (data?.postponePeriod?.error) {
        setErrorMessage(data.postponePeriod.error.message);
        return;
      } else {
        enqueueSnackbar(t('postponePayment.confirmation'), {
          variant: 'success',
        });

        onCompleted();
      }
    } catch (e) {
      setErrorMessage('Failed to postpone period');
      return;
    }
  };

  return (
    <Box padding={9}>
      <Box marginBottom={3}>
        <Text variant="h4">{title}</Text>
      </Box>
      <Box marginBottom={1}>
        <Text variant="pMediumRegular">{description}</Text>
      </Box>
      {notice && (
        <Box marginBottom={3}>
          <Text variant="pMediumRegular" color="grey500">
            {t('postponePayment.notice')}
          </Text>
        </Box>
      )}
      {periodInfo && (
        <Box display="flex" alignItems="center">
          <Box>
            <Icon icon={periodInfo.icon} color={periodInfo.iconColor} size={40} />
          </Box>
          <Box flexDirection="row" marginLeft={3}>
            <Text variant="subtitleBold" color={color}>
              {periodInfo.infoTitle}
            </Text>
            {periodInfo.postponeUntilDate && (
              <Text variant="pMediumRegular">
                {t('postponePayment.delayedUntil')}{' '}
                {formatDate(periodInfo.postponeUntilDate, 'dd.MM.yyyy')}
              </Text>
            )}
            {periodInfo.currentDueDate && (
              <Text variant="pMediumRegular" color="grey500">
                <span style={{ textDecoration: 'line-through' }}>
                  {t('postponePayment.dueDate')}{' '}
                  {formatDate(periodInfo.currentDueDate, 'dd.MM.yyyy')}
                </span>
              </Text>
            )}
          </Box>
        </Box>
      )}
      <Box display="flex">
        <Box width="50%" style={{ marginLeft: 'auto' }}>
          <MainButton
            text={t('postponePayment.postponePayment')}
            colorScheme="orange"
            icon="longArrowRight"
            onClick={() => performPostponement()}
            isLoading={loading}
          />
        </Box>
      </Box>
      {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
    </Box>
  );
};