import { fadeIn } from '@material-hu/utils/animations';

import Checkbox from '@material-hu/components/design-system/Checkbox/Checkbox';
import TableCell from '@material-hu/components/design-system/Table/components/TableCell';
import TableHead from '@material-hu/components/design-system/Table/components/TableHead';
import TableRow from '@material-hu/components/design-system/Table/components/TableRow';

import { SessionStatus } from 'src/pages/dashboard/Learning/Sessions/constants';
import { type SessionStatusType } from 'src/pages/dashboard/Learning/Sessions/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

type TableHeaderProps = {
  onSelectAllCollaborators: () => void;
  checked: boolean;
  sessionStatus?: SessionStatusType;
  selectedCollaborators: Set<number>;
};

export const TableHeader = ({
  onSelectAllCollaborators,
  checked,
  sessionStatus,
  selectedCollaborators,
}: TableHeaderProps) => {
  const { t } = useLokaliseTranslation('learning');

  return (
    <TableHead
      sx={{
        position: 'sticky',
        top: selectedCollaborators.size > 0 ? 68 : 0,
        transition: 'top 0.3s ease-in-out',
        animation: `${fadeIn} 0.3s ease-in-out forwards`,
        zIndex: 1,
      }}
    >
      <TableRow
        headerRow
        sx={{
          '& th': {
            backgroundColor: ({ palette }) =>
              palette.new.background.elements.grey,
          },
        }}
      >
        <TableCell
          headerCell
          selectionCell
          sx={{ borderWidth: 1 }}
        >
          <Checkbox
            onClick={() => onSelectAllCollaborators()}
            checked={checked}
          />
        </TableCell>
        <TableCell headerCell>{t('common.colaborators.single')}</TableCell>
        <TableCell headerCell>{t('common.confirmation')}</TableCell>
        <TableCell headerCell>{t('session.attendance.title')}</TableCell>
        {sessionStatus === SessionStatus.finished && <TableCell headerCell />}
      </TableRow>
    </TableHead>
  );
};