import Stack from '@material-hu/mui/Stack';

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';

export const TableHeader = () => {
  const { t } = useLokaliseTranslation('employee_lifecycle');

  return (
    <TableHead
      sx={{
        backgroundAttachment: 'fixed',
        position: 'sticky',
        top: 0,
        zIndex: 1,
      }}
    >
      <TableRow
        sx={{
          '& th': {
            backgroundColor: ({ palette }) =>
              palette.new.background.elements.grey,
            width: 'min-content',
            maxWidth: '100%',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap',
          },
        }}
      >
        <TableCell
          sx={{
            position: 'sticky',
            left: 0,
            top: 0,
            zIndex: 10,
          }}
        >
          {t('process_report.list.columns.name_and_last_name')}
          <Stack
            sx={{
              height: '100%',
              position: 'absolute',
              right: 0,
              top: 0,
              width: '1px',
              backgroundColor: theme =>
                theme.palette.new.border.neutral.default,
            }}
          />
        </TableCell>
        <TableCell>{t('process_template.title')}</TableCell>
        <TableCell>{t('custom_task_detail.status')}</TableCell>
        <TableCell>{t('screens:Tasks')}</TableCell>
        <TableCell>{t('general.elapsed_time')}</TableCell>
        <TableCell>{t('general.current_task')}</TableCell>
      </TableRow>
    </TableHead>
  );
};
