import React from 'react';
import { Box, Grid, GridItem, ListButton, Pagination, Pill, Text } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { contractStatusColorTextMap, formatDate, formatPrice, getPages } from 'beta/utils/helpers';
import { useTranslation } from 'beta/utils/i18n';
import LinkWrapper from 'components/link-wrapper/LinkWrapper';
import { InvoiceV2, SubscriptionPeriodStatus } from 'typings/graphql';

type PaymentHistoryProps = {
  invoices: InvoiceV2[];
  customerId: string;
  color: MainColorType;
  perPage: number;
  page: number;
  total: number | null | undefined;
  setPage: (n: number) => void;
  onPay: (id: string) => void;
};

export const PaymentHistory = ({
  invoices,
  customerId,
  color,
  perPage,
  total,
  page,
  setPage,
  onPay,
}: PaymentHistoryProps) => {
  const { t } = useTranslation('subscription');

  return (
    <Box>
      <Grid gridTemplate={{ sm: 12 }} columnGap={3} rowGap={3}>
        <GridItem gridColumn={{ sm: 'span4' }}>
          <Box marginLeft={4}>
            <Text variant="eyebrowMedium" color="grey500">
              {t('payments.date')}
            </Text>
          </Box>
        </GridItem>
        <GridItem gridColumn={{ sm: 'span2' }}>
          <Text variant="eyebrowMedium" color="grey500">
            {t('payments.amount')}
          </Text>
        </GridItem>
        <GridItem gridColumn={{ sm: 'span2' }}>
          <Text variant="eyebrowMedium" color="grey500">
            {t('payments.statusTitle')}
          </Text>
        </GridItem>
        <GridItem gridColumn={{ sm: 'span4' }}>
          <Box marginRight={6} display="flex" justifyContent="flex-end">
            <Text variant="eyebrowMedium" color="grey500">
              {t('paymentHistory.action')}
            </Text>
          </Box>
        </GridItem>
      </Grid>
      {invoices.map((invoice) => {
        return (
          <Box backgroundColor="white" boxShadow="small" padding={2} key={invoice?.id} margin={2}>
            <Grid alignItems="center" gridTemplate={{ sm: 12 }} columnGap={3} rowGap={3}>
              <GridItem gridColumn={{ sm: 'span4' }}>
                <Text variant="pMediumBold">
                  {`${formatDate(invoice?.periodStart, 'dd.MM.yyyy')} - ${formatDate(
                    invoice?.periodEnd,
                    'dd.MM.yyyy',
                  )}`}
                </Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span2' }}>
                <Text variant="pMediumBold">
                  {formatPrice(invoice?.totalAmount ? invoice?.totalAmount : 0)}
                </Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span2' }}>
                <Box>
                  <Pill
                    color={contractStatusColorTextMap(invoice.status).color}
                    text={contractStatusColorTextMap(invoice.status).text}
                  />
                </Box>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span4' }}>
                <Box display="flex" justifyContent="flex-end">
                  {invoice?.status === SubscriptionPeriodStatus.Paid ? (
                    <LinkWrapper
                      href={{
                        pathname: '/beta/[customerId]/reikningar/[invoiceId]',
                        query: { customerId: customerId, invoiceId: invoice.id },
                      }}
                    >
                      <ListButton
                        color={color}
                        icon="longArrowRight"
                        text={t('paymentHistory.seeInvoice')}
                      />
                    </LinkWrapper>
                  ) : (
                    <ListButton
                      color={color}
                      icon="longArrowRight"
                      text={t('paymentHistory.payNow')}
                      onClick={() => onPay(invoice.id)}
                    />
                  )}
                </Box>
              </GridItem>
            </Grid>
          </Box>
        );
      })}
      {!!total && (
        <Box display="flex" marginTop={5} alignItems="center" justifyContent="center">
          <Pagination
            color={color}
            currentPage={page}
            onPage={(n) => setPage(n)}
            onNext={(n) => setPage(n + 1)}
            onPrev={(n) => setPage(n - 1)}
            pages={getPages(total, perPage)}
          />
        </Box>
      )}
    </Box>
  );
};