import { FC } from 'react';

import { IconExclamationCircle } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

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

import {
  getHeaders,
  headerTextStyles,
  STICKY_OPTIONS_HEADER_SX,
} from '../constants';

type Props = {
  isDailyView: boolean;
  onOpenIncidencesDrawer: (props: Partial<unknown>) => void;
};

const PeriodHeaders: FC<Props> = props => {
  const { isDailyView, onOpenIncidencesDrawer } = props;
  const { t } = useLokaliseTranslation('time_tracker');

  const headers = getHeaders(isDailyView).map(({ id, label, width }) => (
    <HuTableCell
      key={id}
      sx={{
        ...headerTextStyles,
        width: width || 200,
        ...(id === 'options' && STICKY_OPTIONS_HEADER_SX),
      }}
    >
      <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 0.5 }}>
        {t(label)}
        {id === 'incidences' && (
          <IconExclamationCircle
            size={16}
            onClick={onOpenIncidencesDrawer}
            style={{ cursor: 'pointer' }}
          />
        )}
      </Stack>
    </HuTableCell>
  ));

  return (
    <HuTableHead
      sx={{
        backgroundColor: ({ palette }) => palette.new.background.elements.grey,
      }}
    >
      <HuTableRow
        sx={{
          '.MuiTableCell-head': {
            backgroundColor: ({ palette }) =>
              palette.new.background.elements.grey,
            '&:hover': {
              backgroundColor: ({ palette }) =>
                palette.new.background.elements.grey,
            },
          },
        }}
      >
        {headers}
      </HuTableRow>
    </HuTableHead>
  );
};

export default PeriodHeaders;
