/** biome-ignore-all lint/suspicious/noExplicitAny: nobody knows what the server pagination is */
import { useMutation } from 'react-query';

import { useModal } from '@material-hu/hooks/useModal';
import DeleteIcon from '@material-hu/icons/material/Delete';
import Card from '@material-hu/mui/Card';
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 useHuSnackbar from '@material-hu/components/design-system/Snackbar';

import useFormatDate from 'src/hooks/useFormatDate';
import * as acknowledgementsService from 'src/services/acknowledgementsService';
import {
  type ExchangeWindow,
  ExchangeWindowStatus as Status,
} from 'src/types/acknowledgements';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { type PaginatedResponse } from 'src/utils/tableUtils';

import BasicModal from 'src/components/BasicModal';
import ExchangeWindowStatus from 'src/components/ExchangeWindowStatus';

type Props = {
  data: PaginatedResponse<ExchangeWindow> | undefined;
  serverPagination: any;
  refetch: () => void;
};

const PeriodsTable = ({ data, serverPagination, refetch }: Props) => {
  const { t } = useLokaliseTranslation('acknowledgements');
  const { t: tLokalise } = useLokaliseTranslation();
  const { formatDate } = useFormatDate();
  const { enqueueSnackbar } = useHuSnackbar();

  const { paginationController, TableSortingHeader } = serverPagination;

  const mutation = useMutation(
    (id: number) =>
      acknowledgementsService.deleteAcknowledgementsExchangeWindow(id),
    {
      onSuccess: () => {
        enqueueSnackbar({
          title: t('periods.deleted'),
          variant: 'success',
        });
        refetch();
      },
    },
  );

  const { modal, showModal, closeModal } = useModal<{ window: ExchangeWindow }>(
    ({ window }) => (
      <BasicModal
        title={
          <>
            {window.status === Status.ACTIVE && (
              <>
                {t('periods.active_period', {
                  endDate: formatDate(window.endDate),
                })}
                <br />
              </>
            )}
            {t('periods.delete_sure')}
          </>
        }
        primaryButtonProps={{
          loading: mutation.isLoading,
          children: tLokalise('general:delete'),
          onClick: () => mutation.mutate(window.id, { onSettled: closeModal }),
        }}
        secondaryButtonProps={{
          children: tLokalise('general:cancel'),
          onClick: closeModal,
        }}
      />
    ),
  );

  if (!data?.count) {
    return <Typography color="secondary">{t('periods.no_periods')}</Typography>;
  }

  return (
    <Card>
      {modal}
      <Table>
        <TableHead>
          <TableRow>
            <TableSortingHeader id="NAME">
              {t('periods.period_name')}
            </TableSortingHeader>
            <TableSortingHeader id="START_DATE">
              {tLokalise('general:from_date')}
            </TableSortingHeader>
            <TableSortingHeader id="END_DATE">
              {tLokalise('general:to_date')}
            </TableSortingHeader>
            <TableCell align="center">{tLokalise('general:state')}</TableCell>
            <TableCell align="center">
              {tLokalise('general:action_label')}
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.items.map(window => (
            <TableRow key={window.id}>
              <TableCell>{window.name}</TableCell>
              <TableCell
                align="center"
                variant="shortField"
              >
                {formatDate(window.startDate)}
              </TableCell>
              <TableCell
                align="center"
                variant="shortField"
              >
                {formatDate(window.endDate)}
              </TableCell>
              <TableCell align="center">
                <ExchangeWindowStatus status={window.status} />
              </TableCell>
              <TableCell
                align="center"
                variant="shortField"
              >
                <IconsMenu
                  options={[
                    {
                      onClick: () => showModal({ window }),
                      icon: <DeleteIcon fontSize="small" />,
                      label: tLokalise('general:delete'),
                    },
                  ]}
                />
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      {paginationController(data.count)}
    </Card>
  );
};

export default PeriodsTable;