import { FC } from 'react';

import { IconDoorEnter, IconDoorExit } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  startTime: string | null;
  endTime?: string | null;
  isNightShift: boolean;
};

const PLUS_ONE = '+1';

const EntriesTime: FC<Props> = ({
  startTime,
  endTime = null,
  isNightShift,
}) => {
  const { t } = useLokaliseTranslation('time_tracker');
  if (!startTime) return null;

  return (
    <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 0.5 }}>
      <IconDoorEnter size={16} />
      <Typography
        variant="globalXXS"
        sx={{ color: ({ palette }) => palette.new.text.neutral.lighter }}
      >
        {startTime} -
      </Typography>
      {endTime && <IconDoorExit size={16} />}
      <Typography
        variant="globalXXS"
        sx={{ color: ({ palette }) => palette.new.text.neutral.lighter }}
      >
        {endTime || t('ONGOING')}
      </Typography>
      {isNightShift && (
        <Typography
          variant="globalXXS"
          fontWeight="fontWeightSemiBold"
          sx={{
            color: ({ palette }) => palette.new.text.feedback.info,
            fontSize: 10,
            position: 'relative',
            top: -4,
          }}
        >
          {PLUS_ONE}
        </Typography>
      )}
    </Stack>
  );
};

export default EntriesTime;
