import { type TableSortingHeaderProps } from '@material-hu/hooks/useServerPagination';

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 { useLokaliseTranslation } from 'src/utils/i18n';

import { CertificatesSortColumn } from '../../../constants';

type TableHeaderProps = {
  TableSortingHeader: TableSortingHeaderProps;
};

export const TableHeader = ({ TableSortingHeader }: TableHeaderProps) => {
  const { t } = useLokaliseTranslation('learning');

  const columns = [
    {
      id: 'name',
      label: t('general:name'),
      sortKey: CertificatesSortColumn.name,
    },
    { id: 'courses', label: t('settings.certificates.columns.courses') },
    { id: 'paths', label: t('settings.certificates.columns.paths') },
    { id: 'sessions', label: t('settings.certificates.columns.sessions') },
    { id: 'state', label: t('general:state') },
  ];

  return (
    <TableHead
      sx={{
        '& th': {
          backgroundColor: ({ palette }) =>
            palette.new.background.elements.grey,
          '& > span': {
            fontSize: ({ typography }) => typography.globalXS.fontSize,
          },
        },
      }}
    >
      <TableRow headerRow>
        {columns.map(column => (
          <TableSortingHeader
            key={column.id}
            id={column.sortKey ?? ''}
            disabled={!column.sortKey}
            sx={{ textWrap: 'nowrap' }}
          >
            {column.label}
          </TableSortingHeader>
        ))}
        <TableCell headerCell />
        <TableCell
          headerCell
          sx={{ width: 60 }}
        />
      </TableRow>
    </TableHead>
  );
};
