import React from 'react';
import Table from 'components/table/Table';
import TableBody from 'components/table/TableBody';
import TableCell from 'components/table/TableCell';
import TableHead from 'components/table/TableHead';
import TableRow from 'components/table/TableRow';
import { formatDate, formatPrice } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';

export type Period = {
  periodEnd: Date;
  periodStart: Date;
  amount: string;
};

interface ICalculatedPeriodsTableProps {
  calculatedPeriods: [Period] | [];
  nextDueDate: Date | null;
}

const PaymentPlanDraft = ({ calculatedPeriods, nextDueDate }: ICalculatedPeriodsTableProps) => {
  const { t } = useTranslation(['stillingar']);

  if (calculatedPeriods) {
    return (
      <>
        <h2>{t('period.paymentPlan.title')}</h2>
        <p>
          {nextDueDate
            ? t('period.paymentPlan.infoText')
            : t('period.paymentPlan.noDueDateInfoText')}
        </p>
        <Table>
          <TableHead>
            <TableCell>{t('period.paymentPlan.tableHead.period')}</TableCell>
            <TableCell align="right">{t('period.paymentPlan.tableHead.amount')}</TableCell>
          </TableHead>
          <TableBody>
            {calculatedPeriods.map(({ periodEnd, periodStart, amount }: Period, index: number) => (
              <TableRow key={index}>
                <TableCell>
                  {formatDate(periodStart, 'dd.MM.yyyy')} - {formatDate(periodEnd, 'dd.MM.yyyy')}
                </TableCell>
                <TableCell align="right">{formatPrice(parseInt(amount, 10))}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </>
    );
  }

  return null;
};

export { PaymentPlanDraft };