import { FC } from 'react';

import CloseIcon from '@material-hu/icons/material/Close';
import Dialog from '@material-hu/mui/Dialog';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogTitle from '@material-hu/mui/DialogTitle';
import IconButton from '@material-hu/mui/IconButton';
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 { useTranslation } from 'src/pages/dashboard/recognitions/i18n';
import { ApproversObject } from 'src/types/recognitions';

export type ApproversDialogProps = {
  open: boolean;
  approvers: ApproversObject[];
  onClose: () => void;
};

export const ApproversDialog: FC<ApproversDialogProps> = props => {
  const { open, approvers, onClose } = props;

  const { t } = useTranslation();

  return (
    <Dialog
      open={open}
      onClose={onClose}
      fullWidth
    >
      <DialogTitle
        sx={{
          display: 'flex',
          width: '100%',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}
      >
        {t('IDEA_STATUS')}
        <IconButton onClick={onClose}>
          <CloseIcon />
        </IconButton>
      </DialogTitle>
      <DialogContent dividers>
        <Table stickyHeader>
          <TableHead>
            <TableRow>
              <TableCell>{t('APPROVER')}</TableCell>
              <TableCell>{t('STATUS')}</TableCell>
              <TableCell>{t('COMMENTS')}</TableCell>
              <TableCell>{t('DATE')}</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {approvers.map(approve => (
              <TableRow
                hover
                tabIndex={-1}
                key={approve.folio}
              >
                <TableCell>{approve.approverName}</TableCell>
                <TableCell>{approve.statusName}</TableCell>
                <TableCell>{approve.comments}</TableCell>
                <TableCell>{approve.actionDate}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </DialogContent>
    </Dialog>
  );
};

export default ApproversDialog;