import * as React from 'react';
import { MainButton, Text, Box, Icon } from '@nova-hf/ui';
import { useTranslation } from 'utils/i18n';
import { MainColorType, GreyScaleColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { MainButtonProps } from '@nova-hf/ui/umd/ts/src/buttons/MainButton/MainButton';

type StatusType = 'Unpaid' | 'Paid' | 'Recurring';

interface IPaymentStatusBarProps {
  dueDate: string;
  amount: string;
  dateText: string;
  amountText: string;
  status: StatusType;
  menu?: React.ReactNode;
  color?: MainColorType | GreyScaleColorType;
  postponedUntil?: string | null;
  button?: MainButtonProps;
}

const PaymentStatusBar = ({
  amount,
  amountText,
  dueDate,
  dateText,
  postponedUntil,
  status,
  menu,
  button,
  color = 'black100',
}: IPaymentStatusBarProps) => {
  const { t } = useTranslation('subscription');

  return (
    <Box
      background="white"
      width="100%"
      borderColor="grey200"
      borderWidth="2px"
      borderStyle="solid"
      marginBottom={4}
    >
      <Box
        display="flex"
        justifyContent="space-between"
        flexDirection={{ sm: 'column', md: 'row', lg: 'row' }}
      >
        <Box style={{ placeSelf: 'center' }} width="100%">
          <Box display="flex" padding={3} paddingRight={0}>
            <Box style={{ placeSelf: 'center' }} paddingRight={2}>
              {status === 'Recurring' || status === 'Paid' ? (
                <Icon icon="wallet" color="black100" size={40} />
              ) : (
                <Icon icon="warning" color="warning" size={40} />
              )}
            </Box>
            <Box display="flex" flexDirection="column">
              <Text variant="subtitleBold" color={color}>
                {dateText}
              </Text>
              {postponedUntil ? (
                <Box display="flex">
                  <Text variant="pMediumRegular">
                    {t('postponePayment.delayedUntil')} {postponedUntil}
                  </Text>
                  <Box paddingLeft={2}>
                    <Text
                      color="grey500"
                      style={{ textDecoration: 'line-through' }}
                      variant="pMediumRegular"
                    >
                      {t('postponePayment.dueDate')} {dueDate}
                    </Text>
                  </Box>
                </Box>
              ) : (
                <Box>
                  <Text variant="pMediumRegular">
                    {t('postponePayment.dueDate')} {dueDate}
                  </Text>
                </Box>
              )}
            </Box>
          </Box>
        </Box>
        <Box style={{ placeSelf: 'center' }} width="100%">
          <Box display="flex" padding={3} justifyContent={{ sm: 'space-between', md: 'flex-end' }}>
            <Text variant="subtitleBold">{amountText}</Text>
            <Box paddingLeft={2}>
              <Text variant="subtitleRegular">{amount}</Text>
            </Box>
          </Box>
        </Box>
        {!!button && (
          <>
            <Box display={{ md: 'none' }} width="100%" style={{ placeSelf: 'center' }}>
              <Box width="100%" display="flex" paddingRight={{ lg: 3 }}>
                <Box width="100%" style={{ minWidth: '250px' }}>
                  <MainButton {...button} />
                </Box>
              </Box>
            </Box>
            <Box display={{ sm: 'none', md: 'block' }} style={{ placeSelf: 'center' }}>
              <Box display="flex" paddingRight={{ lg: 3 }}>
                <Box style={{ minWidth: '250px' }}>
                  <MainButton {...button} />
                </Box>
              </Box>
            </Box>
          </>
        )}
        {menu && (
          <Box style={{ placeSelf: 'center' }} display="flex">
            {menu}
          </Box>
        )}
      </Box>
    </Box>
  );
};

export default PaymentStatusBar;