import { useState } from 'react';

import { IconCheck, IconCircleX } from '@material-hu/icons/tabler';
import Collapse from '@material-hu/mui/Collapse';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import TableToolbarComponent from '@material-hu/components/design-system/Table/components/TableToolbar';

import { useUpdateSessionAttendance } from 'src/pages/dashboard/Learning/Sessions/hooks/useUpdateSessionAttendance';
import { useLokaliseTranslation } from 'src/utils/i18n';

type TableToolbarProps = {
  selectedCollaborators: Set<number>;
  sessionId?: number;
  onResetSelection: () => void;
};

export const TableToolbar = ({
  selectedCollaborators,
  sessionId,
  onResetSelection,
}: TableToolbarProps) => {
  const [optionSelected, setOptionSelected] = useState<
    'present' | 'absent' | null
  >(null);
  const { t } = useLokaliseTranslation(['people_experience', 'learning']);

  const {
    mutate: updateSessionAttendance,
    isLoading: isUpdatingSessionAttendance,
  } = useUpdateSessionAttendance(sessionId);

  const handleMarkCollaborators = ({ assisted }: { assisted: boolean }) => {
    setOptionSelected(assisted ? 'present' : 'absent');
    updateSessionAttendance(
      {
        userIds: Array.from(selectedCollaborators),
        assisted,
      },
      {
        onSuccess: () => onResetSelection(),
        onSettled: () => setOptionSelected(null),
      },
    );
  };
  return (
    <Collapse
      sx={{ position: 'sticky', top: 0, zIndex: 1 }}
      in={!!selectedCollaborators && selectedCollaborators.size > 0}
    >
      <TableToolbarComponent
        sx={{
          py: 2,
          px: 3,
          justifyContent: 'space-between',
          display: 'flex',
          flexDirection: 'row',
        }}
      >
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 0.5 }}>
          <Typography>{t('general:has_selected')}</Typography>
          <Typography fontWeight="fontWeightSemiBold">
            {t('people_experience:collaborator_count', {
              count: selectedCollaborators.size,
            })}
          </Typography>
          <Button
            sx={{ ml: 1 }}
            onClick={onResetSelection}
          >
            {t('general:cancel_selection')}
          </Button>
        </Stack>
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
          <Button
            variant="secondary"
            startIcon={<IconCircleX />}
            disabled={isUpdatingSessionAttendance}
            loading={optionSelected === 'absent' && isUpdatingSessionAttendance}
            onClick={() => handleMarkCollaborators({ assisted: false })}
          >
            {t('learning:common.absent_one')}
          </Button>
          <Button
            variant="primary"
            startIcon={<IconCheck />}
            disabled={isUpdatingSessionAttendance}
            loading={
              optionSelected === 'present' && isUpdatingSessionAttendance
            }
            onClick={() => handleMarkCollaborators({ assisted: true })}
          >
            {t('learning:common.present_one')}
          </Button>
        </Stack>
      </TableToolbarComponent>
    </Collapse>
  );
};