import { FC } from 'react';
import { useNavigate } from 'react-router-dom';

import Chip from '@material-hu/mui/Chip';
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 Button from '@material-hu/components/design-system/Buttons/Button';

import NoResultsTable from 'src/pages/dashboard/recognitions/components/NoResultsTable';
import { useTranslation } from 'src/pages/dashboard/recognitions/i18n';
import { recognitionsRoutes } from 'src/pages/dashboard/recognitions/routes';
import { IdeaObject, ApproversObject } from 'src/types/recognitions';
import { getStatusColor } from 'src/utils/recognitions';

export type IdeasTableProps = {
  ideas: IdeaObject[];
  onSelectCurrentApprover: (approver: ApproversObject[]) => void;
  onOpenApproverDialog: () => void;
};

export const IdeasTable: FC<IdeasTableProps> = props => {
  const { ideas, onSelectCurrentApprover, onOpenApproverDialog } = props;

  const { t } = useTranslation();
  const navigate = useNavigate();

  const handleViewDetails = (event, approverData) => {
    event.stopPropagation();
    event.preventDefault();
    onSelectCurrentApprover(approverData);
    onOpenApproverDialog();
  };

  const handleOnClick = id => navigate(recognitionsRoutes.ideaDetail(id));

  return (
    <Table stickyHeader>
      <TableHead>
        <TableRow>
          <TableCell>{t('FOLIO')}</TableCell>
          <TableCell>{t('NAME')}</TableCell>
          <TableCell>{t('STATUS')}</TableCell>
          <TableCell sx={{ width: '120px' }} />
        </TableRow>
      </TableHead>
      <TableBody>
        {ideas?.length === 0 && (
          <NoResultsTable message={t('NO_IDEAS_FOUND')} />
        )}
        {ideas?.length > 0 && (
          <>
            {ideas.map(idea => {
              return (
                <TableRow
                  hover
                  tabIndex={-1}
                  key={idea.folio}
                  onClick={() => handleOnClick(idea.folio)}
                >
                  <TableCell>{idea.folio}</TableCell>
                  <TableCell>{idea.ideaTitle}</TableCell>
                  <TableCell>
                    <Chip
                      label={idea.status}
                      color={getStatusColor(idea.status)}
                      size="small"
                      sx={{
                        fontSize: '12px',
                        color: '#FFFFFF',
                        fontWeight: 500,
                      }}
                    />
                  </TableCell>
                  <TableCell>
                    {idea.approvers.length > 0 && (
                      <Button
                        onClick={event =>
                          handleViewDetails(event, idea.approvers)
                        }
                        sx={{ fontSize: '12px' }}
                      >
                        {t('VIEW_DETAILS')}
                      </Button>
                    )}
                  </TableCell>
                </TableRow>
              );
            })}
          </>
        )}
      </TableBody>
    </Table>
  );
};

export default IdeasTable;