import * as React from 'react';
import { Box, Text, Icon } from '@nova-hf/ui';
import classNames from 'classnames/bind';

import { formatPrice, formatDate } from 'utils/helpers';
import { IInvoice } from 'typings';
import { useTranslation } from 'utils/i18n';

import s from './InvoiceBoxItem.module.scss';

const cn = classNames.bind(s);
interface IInvoiceBoxItemProps {
  color?: string;
  invoice: IInvoice;
}

export const InvoiceBoxItem = ({
  color,
  invoice: { invoiceNumber, date, amount, isOpen, pdfLink },
}: IInvoiceBoxItemProps) => {
  const { t } = useTranslation('invoices');
  return (
    <div className={cn(s.invoiceBoxItem, `color-${color}`)}>
      <div className={s.invoiceBoxItem__container}>
        <div className={cn(s.invoiceBoxItem__shadow, `color-${color}`)}>
          <a
            className={cn(s.invoiceBoxItem__wrapper, `color-${color}`)}
            href={pdfLink}
            target="_blank"
            rel="noreferrer"
          >
            <div className={s.invoiceBoxItem__head}>
              <Box marginBottom={4}>
                <Text style={{ textTransform: 'capitalize' }} variant="h6">
                  {' '}
                  {formatDate(date, 'MMMM')} &apos;{formatDate(date, 'yy')}
                </Text>
              </Box>
              <Box display="flex" color="black100">
                <Box width="50%" style={{ minWidth: '85px' }}>
                  <Text variant="eyebrowMedium">dags.</Text>
                  {date && <Text variant="pLargeRegular">{formatDate(date, 'dd.MM.yyyy')}</Text>}
                </Box>
                <Box width="50%">
                  <Text variant="eyebrowMedium">{`${t('claims.invoiceShort')}.`}</Text>
                  {invoiceNumber && <Text variant="pLargeRegular">{invoiceNumber}</Text>}
                </Box>
              </Box>
            </div>
            <div className={s.invoiceBoxItem__content}>
              <Text color="black100" variant="h6">
                {formatPrice(amount)}
              </Text>
              <Text variant="eyebrowSmall" color="grey500">
                {!isOpen ? t('claims.paid') : t('claims.unpaid')}
              </Text>
              <div className={s.invoiceBoxItem__contentSubtext}></div>
            </div>
            <div className={s.invoiceBoxItem__download}>
              <Icon icon="download" />
            </div>
          </a>
        </div>
      </div>
    </div>
  );
};