import React, { useState } from 'react';
import { inject } from 'mobx-react';

import { formatDate, formatPrice } from 'utils/helpers';
import { SecondaryButton, Box, Pill, AttentionBanner } 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 { usePayUsageChargesMutation, useUsageChargesQuery } from 'typings/graphql';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import Authentication from 'store/authentication';
import { useTranslation } from 'utils/i18n';
import { orderBy } from 'lodash';

interface UsageChargesProps {
  subscriptionId: string;
  authentication?: Authentication;
  color?: MainColorType;
}

const UsageCharges = ({ subscriptionId, color = 'orange' }: UsageChargesProps) => {
  const { t } = useTranslation('subscription');
  const { loading, error, data, refetch } = useUsageChargesQuery({
    variables: {
      input: {
        id: subscriptionId,
      },
    },
    fetchPolicy: 'network-only',
    notifyOnNetworkStatusChange: true,
  });
  const usageCharges = data?.usageCharges.usageCharges;
  const [succesMessage, setSuccessMessage] = useState('');
  const [errorMessage, setErrorMessage] = useState('');
  const [payUsageChargesMutation, { loading: loadingPay }] = usePayUsageChargesMutation({
    onCompleted() {
      refetch();
    },
    awaitRefetchQueries: true,
  });
  const onPayClick = async (id: string, orderId: string) => {
    try {
      if (orderId && id) {
        const { data: payUsageChargeData } = await payUsageChargesMutation({
          variables: {
            input: {
              id: id,
              orderId: orderId,
            },
          },
        });
        if (payUsageChargeData) {
          setSuccessMessage(t('payments.paymentSuccess'));
          setErrorMessage('');
        }
      }
    } catch (e) {
      setErrorMessage(t('payments.paymentFailed'));
      setSuccessMessage('');
    }
  };

  if (error) return <div>{t('payments.errorMessage')}</div>;
  if (loading) return <div>{t('payments.loading')}</div>;
  if (loadingPay) return <Box marginY={5}>{t('payments.loadingPay')}</Box>;
  if (usageCharges && usageCharges.length < 1)
    return <Box marginY={5}>{t('usage.noUsageCharges')}</Box>;

  return (
    <>
      {usageCharges && usageCharges.length > 0 && (
        <Table>
          <TableHead>
            <TableCell>{t('payments.date')}</TableCell>
            <TableCell>{t('payments.amount')}</TableCell>
            <TableCell>{t('payments.statusTitle')}</TableCell>
            <TableCell align="right">{t('payments.action')}</TableCell>
          </TableHead>
          <TableBody>
            {orderBy(usageCharges, ['order.created'], ['desc']).map((usageCharge) => (
              <TableRow key={usageCharge?.orderId}>
                <TableCell>
                  <Box>
                    {usageCharge?.order?.created
                      ? formatDate(usageCharge.order.created, 'dd.MM.yyyy')
                      : t('date.noDate')}
                  </Box>
                </TableCell>
                <TableCell>{formatPrice(usageCharge?.order?.totalDue ?? 0)}</TableCell>
                <TableCell>
                  <Pill
                    text={
                      usageCharge?.status === 'Paid'
                        ? t('payments.status.Paid')
                        : t('payments.status.New')
                    }
                    color={usageCharge?.status === 'Paid' ? 'green' : 'warning'}
                  ></Pill>
                </TableCell>
                <TableCell align="right">
                  {usageCharge && usageCharge?.status !== 'Paid' && (
                    <SecondaryButton
                      onClick={() => onPayClick(subscriptionId, usageCharge.orderId)}
                      isDisabled={loadingPay}
                      icon="creditcard"
                      text={t('payments.unpaidText')}
                      colorScheme={color}
                    ></SecondaryButton>
                  )}
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      )}
      {succesMessage && (
        <AttentionBanner color="success" icon="checkBox" regularText={succesMessage} />
      )}
      {errorMessage && (
        <AttentionBanner color="warning" icon="warning" regularText={errorMessage} />
      )}
    </>
  );
};

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