import * as React from 'react';
import { inject } from 'mobx-react';

import { formatDate, formatPrice } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';
import { ContainerDeprecated, Pill, Box, SecondaryButton } from '@nova-hf/ui';
import Table from 'components/table/Table';
import TableBody from 'components/table/TableBody';
import TableCell from 'components/table/TableCell';
import TableRow from 'components/table/TableRow';
import TableHead from 'components/table/TableHead';
import { useSnackbar } from 'notistack';

import { SubscriptionPeriodStatus } from 'typings';
import {
  useSubscriptionPeriodsQuery,
  SubscriptionPeriod,
  usePerformSubscriptionPeriodChargeMutation,
} from 'typings/graphql';
import LinkWrapper from 'components/link-wrapper/LinkWrapper';
import { AlltSamanPaymentStatusBar } from 'components/payment-status-bar/AlltSamanPaymentStatusBar';
import { MainColorType, GreyScaleColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import Authentication from 'store/authentication';

interface IGreidslurProps {
  subscriptionId: string;
  authentication?: Authentication;
  color?: MainColorType | GreyScaleColorType;
  showStatusBar?: boolean;
}

const SubscriptionPeriods = ({ subscriptionId, showStatusBar = true }: IGreidslurProps) => {
  const { t } = useTranslation('subscription');
  const { enqueueSnackbar } = useSnackbar();

  const { loading, error, data, refetch } = useSubscriptionPeriodsQuery({
    variables: { subscriptionId },
  });

  const [paySubscriptionPeriod, { loading: loadingPay }] =
    usePerformSubscriptionPeriodChargeMutation({
      onCompleted() {
        refetch();
      },
      awaitRefetchQueries: true,
    });
  const onPayClick = async (id: string, periodId: string) => {
    try {
      if (periodId && id) {
        const { data: payPeriodData } = await paySubscriptionPeriod({
          variables: {
            input: {
              subscriptionId: id,
              periodId: periodId,
            },
          },
        });
        const paymentAttempts =
          payPeriodData?.performSubscriptionPeriodCharge.subscriptionPeriod?.order?.payments;

        if (paymentAttempts) {
          const lastPayment = paymentAttempts[paymentAttempts.length - 1];

          enqueueSnackbar(lastPayment.message, {
            variant: lastPayment.status != 0 ? 'error' : 'success',
          });
        }
      }
    } catch (error) {
      enqueueSnackbar('Upp kom óvænt villa', {
        variant: 'error',
      });
    }
  };
  return (
    <ContainerDeprecated underBar spacing>
      {loading && <div>Sæki gögn...</div>}
      {error && <div>Upp kom villa við að sækja gögn</div>}
      {showStatusBar && <AlltSamanPaymentStatusBar subscriptionId={subscriptionId} />}
      {data?.subscriptionPeriods && (
        <Table>
          <TableHead>
            <TableCell>{t('payments.period')}</TableCell>
            <TableCell>{t('payments.amount')}</TableCell>
            <TableCell align="right">{t('payments.statusTitle')}</TableCell>
          </TableHead>
          <TableBody>
            {data.subscriptionPeriods.periods?.map(
              ({
                id,
                periodEnd,
                periodStart,
                amount,
                status,
                orderId,
                paymentPostponements,
              }: SubscriptionPeriod) => {
                const perStart: Date = periodStart;
                const perEnd: Date = periodEnd;
                return (
                  <TableRow key={id}>
                    <TableCell>
                      <Box
                        paddingRight={
                          paymentPostponements && paymentPostponements?.length > 0 ? 2 : 0
                        }
                        display="inline-flex"
                      >
                        {formatDate(perStart, 'dd.MM.yyyy')} - {formatDate(perEnd, 'dd.MM.yyyy')}
                      </Box>
                      {paymentPostponements && paymentPostponements?.length > 0 && (
                        <Pill
                          text={`${t('postponePayment.postponed')} x ${
                            paymentPostponements?.length
                          }`}
                          color="attention"
                          shape="boxed"
                        />
                      )}
                    </TableCell>
                    <TableCell>{amount ? formatPrice(amount) : ''}</TableCell>
                    <TableCell align="right">
                      {t(`payments.status.${status}`)}
                      <br />
                      {!showStatusBar && status !== SubscriptionPeriodStatus.Paid && (
                        <Box>
                          <SecondaryButton
                            onClick={() => onPayClick(subscriptionId, id)}
                            isDisabled={loadingPay}
                            icon="creditcard"
                            text={t('payments.unpaidWithDefaultCard')}
                            colorScheme="pink"
                          ></SecondaryButton>
                          <LinkWrapper
                            href={`https://nova.is/barinn/greidsla/ogreidd-pontun/${orderId}`}
                            target="_blank"
                            style={{ color: 'pink' }}
                          >
                            {t('payments.unpaidWithAnotherCard')}
                          </LinkWrapper>
                        </Box>
                      )}
                    </TableCell>
                  </TableRow>
                );
              },
            )}
          </TableBody>
        </Table>
      )}
    </ContainerDeprecated>
  );
};

export default inject('authentication')(SubscriptionPeriods);