import { type useHuPagination } from '@material-hu/hooks/useHuPagination';
import { useTheme } from '@material-hu/mui/styles';

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 { TableColumns } from 'src/pages/dashboard/Learning/common/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

type CoursesTableHeaderProps = {
  TableSort: ReturnType<typeof useHuPagination>['HuTableSortingHeader'];
};

const CoursesTableHeader = ({ TableSort }: CoursesTableHeaderProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { palette } = useTheme();

  return (
    <TableHead>
      <TableRow
        headerRow
        sx={{
          backgroundColor: palette.new.background.elements.grey,
          '& th': { textWrap: 'nowrap' },
        }}
      >
        <TableSort
          id={TableColumns.title}
          sx={{
            position: 'sticky',
            left: 0,
            zIndex: 1,
            backgroundColor: palette.new.background.elements.grey,
            '&::after': {
              content: '""',
              position: 'absolute',
              right: 0,
              top: 0,
              height: '100%',
              width: '2px',
              backgroundColor: palette.new.border.neutral.default,
            },
          }}
        >
          {t('general:name')}
        </TableSort>
        <TableCell headerCell>{t('categories.title_one')}</TableCell>
        <TableCell headerCell>{t('categories.children.title_other')}</TableCell>
        <TableCell headerCell>{t('general:state')}</TableCell>
        <TableCell headerCell>{t('common.finished')}</TableCell>
        <TableSort id={TableColumns.createdAt}>
          {t('general:created_at')}
        </TableSort>
        <TableCell headerCell>{t('general:created_by_masc')}</TableCell>
        <TableCell
          headerCell
          sx={{
            position: 'sticky',
            right: 0,
            zIndex: 1,
            backgroundColor: palette.new.background.elements.grey,
          }}
        />
      </TableRow>
    </TableHead>
  );
};

export default CoursesTableHeader;
