import React from 'react';
import { Box, Icon, MainButton, ModalHeader, Text } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { formatDate } from 'beta/utils/helpers';
import { useTranslation } from 'beta/utils/i18n';

type PaymentPostponementProps = {
  postpone: () => void;
  cancel: () => void;
  postponeDate: string | Date;
  color?: MainColorType;
};

export const PaymentPostponement = ({
  cancel,
  postpone,
  color = 'orange',
  postponeDate,
}: PaymentPostponementProps) => {
  const { t } = useTranslation('alltSaman');
  const theDate = new Date(postponeDate);
  const addThreeDate = new Date(theDate.setDate(theDate.getDate() + 3));
  const newDate = formatDate(addThreeDate, 'dd.MM.yyyy');
  const oldDate = formatDate(postponeDate, 'dd.MM.yyyy');

  return (
    <Box display="flex" flexDirection="column">
      <ModalHeader title="Fresta greiðslu" />
      <Box margin={3}>
        <Text variant="pMediumRegular">{t('alltSaman.postponeText')}</Text>
        <Box>
          <Text color="grey400">{t('alltSaman.postponeWarning')}</Text>
        </Box>
      </Box>
      <Box
        display="flex"
        flexDirection="row"
        padding={3}
        marginLeft={3}
        borderStyle="solid"
        borderColor={color}
        backgroundColor="white"
        alignItems="center"
      >
        <Icon color={color} icon="warning" size={48} viewBox={24} />
        <Box marginLeft={3} display="flex" flexDirection="column">
          <Text color={color} variant="pLargeBold">
            {t('alltSaman.nextPayment')}
          </Text>
          <Text variant="pMediumRegular">{t('alltSaman.postponeUntil', { date: newDate })}</Text>
          <Text variant="pMediumRegular">{t('alltSaman.paymentDate', { date: oldDate })}</Text>
        </Box>
      </Box>
      <Box display="flex" marginTop={4} flexDirection={['column', 'row', 'row']} gap={4}>
        <MainButton
          text={t('alltSaman.changeMind')}
          colorScheme="white"
          dottedShadow="none"
          icon="longArrowRight"
          onClick={() => cancel()}
        />
        <MainButton
          text={t('alltSaman.postpone')}
          colorScheme={color}
          dottedShadow="none"
          onClick={() => postpone()}
        />
      </Box>
    </Box>
  );
};