import { useMutation } from 'react-query';
import { useNavigate } from 'react-router';

import Card from '@material-hu/mui/Card';
import Stack from '@material-hu/mui/Stack';
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 IconsMenu from '@material-hu/components/deprecated/IconsMenu';
import useSnackbarUtils from '@material-hu/components/deprecated/Snackbar';
import { useDialogLayer } from '@material-hu/components/layers/Dialogs';

import * as performanceService from 'src/services/performanceService';
import {
  type PerformanceQuery,
  type ReviewCycle,
  type ReviewCycleStatus,
} from 'src/types/performance';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CenteredCircularProgress from 'src/components/CircularProgress';
import ReviewCycleLabelStatus from 'src/components/ReviewCycleLabelStatus';
import Scrollbar from 'src/components/Scrollbar';

import { reviewRoutes } from '../../../routes';
import { getCycleSubtitle, isCycleDraft } from '../../../utils';

type Props = {
  cyclesQuery: PerformanceQuery<ReviewCycle>;
};

const CyclesTable = ({ cyclesQuery }: Props) => {
  const { t } = useLokaliseTranslation(['performance', 'general']);
  const navigate = useNavigate();
  const {
    TableSortingHeader,
    paginationController,
    searchBar,
    list: cycles,
    refetch,
    isLoading,
    count,
    query,
  } = cyclesQuery;

  const { showSnackbar } = useSnackbarUtils();

  const deleteMutation = useMutation(
    ({ id }: { id: number }) => performanceService.deleteCycle(id),
    {
      onSuccess: () => {
        showSnackbar(t('form.delete_cycle_modal.cycle_deleted_snackbar'));
        refetch();
      },
    },
  );

  const { openDialog, closeDialog } = useDialogLayer();

  const openDeleteDialog = (id: number) => {
    openDialog({
      title: t('form.delete_cycle_modal.title'),
      textBody: t('form.delete_cycle_modal.body'),
      primaryButtonProps: {
        children: t('form.delete_cycle_modal.confirm_button'),
        onClick: () =>
          deleteMutation.mutateAsync(
            { id },
            { onSettled: () => closeDialog() },
          ),
      },
      secondaryButtonProps: {
        children: t('GENERAL:CANCEL'),
        onClick: () => closeDialog(),
      },
    });
  };

  const redirect = (cycle: ReviewCycle) =>
    navigate(
      isCycleDraft(cycle)
        ? reviewRoutes.newCycle(cycle.id)
        : reviewRoutes.cycle(cycle.id),
    );

  return (
    <Card>
      {searchBar}
      <Scrollbar>
        {isLoading && <CenteredCircularProgress centered />}
        {!isLoading && cycles?.length !== 0 && (
          <Table>
            <TableHead>
              <TableRow>
                <TableSortingHeader id="NAME">
                  {t('general:cycle')}
                </TableSortingHeader>
                <TableSortingHeader id="STATUS">
                  {t('general:state')}
                </TableSortingHeader>
                <TableCell />
              </TableRow>
            </TableHead>
            <TableBody>
              {cycles.map(cycle => (
                <TableRow
                  hover
                  key={cycle.id}
                  sx={{ cursor: 'pointer' }}
                  onClick={() => redirect(cycle)}
                >
                  <TableCell
                    sx={{ py: 0, pr: 0 }}
                    variant="titleField"
                  >
                    <Stack maxWidth="90%">
                      <Typography variant="subtitle2">{cycle.name}</Typography>
                      <Typography
                        variant="body2"
                        color="textSecondary"
                      >
                        {getCycleSubtitle(
                          cycle.formTemplates?.map(f =>
                            t(`types.${f.evaluationType}`, {
                              context: f.evaluationType,
                            }),
                          ) ?? [],
                          t,
                        )}
                      </Typography>
                    </Stack>
                  </TableCell>
                  <TableCell variant="shortField">
                    <ReviewCycleLabelStatus
                      status={cycle.status as ReviewCycleStatus}
                    />
                  </TableCell>
                  <TableCell
                    align="right"
                    variant="shortField"
                  >
                    <IconsMenu
                      options={[
                        {
                          onClick: () => openDeleteDialog(cycle.id),
                          icon: null,
                          label: t('general:DELETE'),
                          color: 'error',
                        },
                      ]}
                    />
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </Scrollbar>
      {cycles?.length === 0 && (
        <Stack
          justifyContent="center"
          alignItems="center"
          py={6}
          mt={6}
        >
          <Typography variant="h6">
            {t(
              query
                ? 'cycles.no_cycles_found_title_admin'
                : 'cycles.empty_cycles_title',
            )}
          </Typography>
          <Typography
            variant="body1"
            color="textSecondary"
            mb={3}
            mt={1}
          >
            {t(
              query
                ? 'cycles.no_cycles_found_description_admin'
                : 'cycles.empty_cycles_description',
            )}
          </Typography>
        </Stack>
      )}
      {cycles?.length !== 0 && paginationController(count || 0)}
    </Card>
  );
};

export default CyclesTable;