import { FC } from 'react';

import Table from '@material-hu/mui/Table';
import TableBody from '@material-hu/mui/TableBody';
import TableCell from '@material-hu/mui/TableCell';
import TableHead from '@material-hu/mui/TableHead';
import TableRow from '@material-hu/mui/TableRow';
import Typography from '@material-hu/mui/Typography';

import { useTranslation } from 'src/pages/dashboard/recognitions/i18n';
import { TransactionObject } from 'src/types/recognitions';
import { formatDate } from 'src/utils/recognitions';

export type TransactionTableProps = {
  transactions: TransactionObject[];
};

export const TransactionTable: FC<TransactionTableProps> = props => {
  const { transactions } = props;

  const { t } = useTranslation();

  return (
    <Table
      stickyHeader
      aria-label="sticky table"
    >
      <TableHead>
        <TableRow>
          <TableCell>{t('DATE')}</TableCell>
          <TableCell>{t('DESCRIPTION')}</TableCell>
          <TableCell>{t('AMOUNT')}</TableCell>
          <TableCell>{t('MOVEMENT')}</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {transactions && (
          <>
            {transactions.map(row => {
              return (
                <TableRow
                  hover
                  key={row.transactionsId}
                >
                  <TableCell>{formatDate(row.created)}</TableCell>
                  <TableCell>{row.description}</TableCell>
                  <TableCell>{row.amount}</TableCell>
                  <TableCell>{row.movement}</TableCell>
                </TableRow>
              );
            })}
          </>
        )}
        {(transactions?.length === 0 || !transactions) && (
          <TableRow>
            <TableCell
              colSpan={4}
              align="center"
            >
              <Typography
                color="textSecondary"
                variant="subtitle2"
              >
                {t('NO_TRANSACTIONS')}
              </Typography>
            </TableCell>
          </TableRow>
        )}
      </TableBody>
    </Table>
  );
};

export default TransactionTable;