import { type FC, useEffect } from 'react';
import { useQuery } from 'react-query';

import { useDrawer } from '@material-hu/hooks/useDrawer';
import { useServerPagination } from '@material-hu/hooks/useServerPagination';
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 IconsMenu from '@material-hu/components/deprecated/IconsMenu';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { acknowledgementsKeys } from 'src/pages/dashboard/Acknowledgements/queries';
import { getColaboratorStats } from 'src/services/acknowledgementsService';
import { type Colaborator } from 'src/types/acknowledgements';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CircularProgress from 'src/components/CircularProgress';

import AjustBalanceDrawer from './AjustBalanceDrawer';

export const ColaboratorStats: FC = () => {
  const { t } = useLokaliseTranslation('acknowledgements');
  const HuGoThemeProvider = useHuGoTheme();

  const {
    paginationController,
    pagination,
    setPage,
    Searchbar,
    query: search,
  } = useServerPagination({
    labelRowsPerPage: t('GENERAL:ROWS_PER_PAGE'),
  });

  // biome-ignore lint/correctness/useExhaustiveDependencies: only on search change
  useEffect(() => {
    setPage(0);
  }, [search]);

  const { data, isLoading, isPreviousData } = useQuery(
    acknowledgementsKeys.colaboratorStats.detail({ ...pagination, search }),
    () => getColaboratorStats({ ...pagination, search }),
    {
      select: response => response.data,
      keepPreviousData: true,
    },
  );

  const { showDrawer: showAjustBalanceDrawer, drawer: ajustBalanceDrawer } =
    useDrawer(AjustBalanceDrawer, { title: t('stats.adjust_balance') });

  const handleAjustBalance = (colaborator: Colaborator) => () =>
    showAjustBalanceDrawer({ colaborator });

  const getActions = (colaborator: Colaborator) => [
    {
      onClick: handleAjustBalance(colaborator),
      label: t('stats.adjust_balance'),
    },
  ];

  if (isLoading) {
    return <CircularProgress centered />;
  }

  return (
    <>
      <HuGoThemeProvider>{ajustBalanceDrawer}</HuGoThemeProvider>
      <Card>
        <Stack>
          <Searchbar
            placeholder={t('GENERAL:SEARCH')}
            sx={{ p: 1 }}
          />
        </Stack>
        <Table>
          <TableHead>
            <TableCell>{t('general:name')}</TableCell>
            <TableCell>{t('general:email')}</TableCell>
            <TableCell>{t('stats.received')}</TableCell>
            <TableCell>{t('stats.exchanged')}</TableCell>
            <TableCell>{t('stats.expired')}</TableCell>
            <TableCell>{t('stats.balance')}</TableCell>
            <TableCell></TableCell>
          </TableHead>
          <TableBody
            sx={{
              opacity: isPreviousData ? 0.5 : 1,
            }}
          >
            {data?.items?.map(colaborator => (
              <TableRow key={colaborator.id}>
                <TableCell variant="titleField">
                  {colaborator.fullName}
                </TableCell>
                <TableCell>{colaborator.email}</TableCell>
                <TableCell>{colaborator.points}</TableCell>
                <TableCell>{colaborator.pointsRedeemed}</TableCell>
                <TableCell>{colaborator.deletedPoints}</TableCell>
                <TableCell>{colaborator.availablePoints}</TableCell>
                <TableCell
                  align="center"
                  variant="shortField"
                >
                  <IconsMenu options={getActions(colaborator)} />
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
        {paginationController(data?.count || 0)}
      </Card>
    </>
  );
};

export default ColaboratorStats;