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

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

import { TableColumns } from 'src/pages/dashboard/Learning/common/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

type TableHeaderProps = {
  HuTableSortingHeader: HuTableSortingHeaderProps;
};

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

  const columns = [
    {
      label: t('common.name'),
      size: 3,
      sortKey: TableColumns.title,
    },
    { label: t('common.content') },
    {
      label: t('common.last_modified'),
      sortKey: TableColumns.lastModified,
    },
    { label: t('common.participation') },
    { label: t('common.status') },
  ];

  return (
    <HuTableHead
      sx={{
        '& th': {
          backgroundColor: ({ palette }) =>
            palette.new.background.elements.grey,
          '& > span': {
            fontSize: ({ typography }) => typography.subtitle2,
          },
        },
      }}
    >
      <HuTableRow headerRow>
        {columns.map(column => (
          <HuTableSortingHeader
            id={column.sortKey ?? ''}
            disabled={!column.sortKey}
            key={column.label}
            sx={{ textWrap: 'nowrap' }}
            colSpan={column.size || 2}
          >
            {column.label}
          </HuTableSortingHeader>
        ))}
        <HuTableCell headerCell />
      </HuTableRow>
    </HuTableHead>
  );
};

export default TableHeader;
