import React from 'react';
import {
  Box,
  Grid,
  GridItem,
  Icon,
  IconButton,
  ListBase,
  MainButton,
  Menu,
  NotificationBanner,
  Text,
} from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { useTranslation } from 'beta/utils/i18n';
import { useRouter } from 'next/router';
import { ContractStatus, InvoiceV2, useContractQuery } from 'typings/graphql';
import { formatDate, formatPrice } from 'utils/helpers';

type AlltSamanBarProps = {
  color: MainColorType;
  invoice: InvoiceV2;
  isLoading?: boolean;
  onButtonClick: (id: string) => void;
  onPostpone: () => void;
};

export const AlltSamanBar = ({
  color,
  invoice,
  isLoading,
  onButtonClick,
  onPostpone,
}: AlltSamanBarProps) => {
  const { t } = useTranslation(['alltSaman', 'subscription']);
  const newestInvoiceDate =
    invoice && invoice.periodEnd ? formatDate(invoice.periodEnd, 'dd.MM.yyyy') : undefined;
  const newestInvoiceAmount = formatPrice(invoice && invoice.totalAmount ? invoice.totalAmount : 0);
  const canBePostponed = invoice?.paymentPostponements?.length <= 2;
  const router = useRouter();
  const contractId = router.query.contractId ?? '';
  const customerId = router.query.customerId ?? '';
  const { data } = useContractQuery({
    variables: {
      input: {
        id: contractId.toString(),
      },
    },
  });
  const contract = data?.contract;
  const contractStatus = contract?.status ?? '';
  const turnIntoReActivate =
    contractStatus === ContractStatus.Abandoned ||
    contractStatus === ContractStatus.Cancelled ||
    contractStatus === ContractStatus.Canceled;
  const items = () => {
    const menuItems = [
      {
        text: t('alltSaman:alltSaman.changePayDay'),
        onClick: () => {
          router.push(`/beta/${customerId}/askriftir/${contractId}/greidsludagur`);
        },
      },
      {
        text: t('alltSaman:alltSaman.changePaymentMethod'),
        onClick: () => {
          router.push(`/beta/${customerId}/askriftir/${contractId}/greidslumati`);
        },
      },
      {
        text: t('alltSaman:alltSaman.payNow'),
        onClick: () => {
          onButtonClick(invoice.id);
        },
      },
    ];

    if (canBePostponed) {
      menuItems.push({
        text: t('alltSaman:alltSaman.postpone'),
        onClick: () => {
          onPostpone();
        },
      });
    }
    return menuItems;
  };
  return (
    <>
      {turnIntoReActivate ? (
        <Box width="100%">
          <NotificationBanner
            eyebrowText={t('subscription:paymentStatusBar.actionNecessary')}
            description=""
            icon="alltSaman"
            color="orange"
            mainButtonColored={{
              icon: 'longArrowRight',
              text: t('subscription:paymentStatusBar.makeActive'),
              onClick: () =>
                router.push(`/beta/${customerId}/askriftir/${contractId}/greidsludagur`),
            }}
            title={t('subscription:paymentStatusBar.inactive')}
            hasPingAlert
          />
        </Box>
      ) : (
        <Box dottedShadow="medium">
          <ListBase isLoading={isLoading} gap={3}>
            <Grid gridTemplate={{ sm: 6, lg: 12 }} columnGap={{ sm: 3, lg: 2 }} alignItems="center">
              <GridItem gridColumn={{ sm: 'span1' }}>
                <Icon icon="wallet" color="black100" size={40} />
              </GridItem>
              <GridItem gridColumn={{ sm: 'span4', lg: 'span4' }}>
                <Text variant="pLargeBold" color={color}>
                  {t('alltSaman.nextPayment')}
                </Text>
                <Text variant="pMediumRegular">{newestInvoiceDate}</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span3' }}>
                <Box display="flex" flexDirection="row" alignItems="center" gap={2}>
                  <Text marginBottom={1} variant="pLargeBold">
                    {t('alltSaman.amount')}
                  </Text>
                  <Text marginBottom={1} variant="pMediumRegular">
                    {newestInvoiceAmount}
                  </Text>
                </Box>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span3' }}>
                <Box display="flex" justifyContent="flex-end">
                  <MainButton
                    dottedShadow="none"
                    colorScheme="white"
                    text={t('alltSaman.payNow')}
                    icon="longArrowRight"
                    onClick={() => onButtonClick(invoice.id)}
                  />
                </Box>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span1' }}>
                <Box width="100%" display="flex" justifyContent="flex-end">
                  <Menu
                    color="orange"
                    label="Menu"
                    items={items()}
                    disclosure={
                      <IconButton
                        color="black100"
                        icon="dotsVertical"
                        hiddenButtonText="Action button"
                      />
                    }
                  />
                </Box>
              </GridItem>
            </Grid>
          </ListBase>
        </Box>
      )}
    </>
  );
};