import { IconTrash } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import MenuList from '@material-hu/components/composed-components/MenuList';

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

import EllipsisTooltip from 'src/components/EllipsisTooltip';

import { type RotationDayShiftRef } from '../../../../form';
import { useShiftDisplay } from './useShiftDisplay';

type Props = {
  shift: RotationDayShiftRef;
  onRemove: () => void;
};

const RotationDayShiftLine = ({ shift, onRemove }: Props) => {
  const { t } = useLokaliseTranslation(['shifts', 'time_tracker']);
  const theme = useTheme();
  const { colors, programmedDisplay } = useShiftDisplay(shift);

  const menuOptions = [
    {
      Icon: IconTrash,
      title: t('general:delete'),
      onClick: onRemove,
    },
  ];

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1,
        backgroundColor: colors.backgroundColor,
        border: '1px solid',
        borderColor: colors.accentBorderColor,
        borderRadius: theme.shape.borderRadiusM,
        px: 1.5,
        py: 1,
      }}
    >
      <Stack sx={{ flex: 1, minWidth: 0 }}>
        <EllipsisTooltip title={shift.name || t('time_tracker:unnamed_shift')}>
          <Typography
            variant="globalS"
            sx={{
              fontWeight: 'fontWeightSemiBold',
              color: colors.textColor,
            }}
            noWrap
          >
            {shift.name || t('time_tracker:unnamed_shift')}
          </Typography>
        </EllipsisTooltip>
        {shift.timeSlots.length > 0 && (
          <Typography
            variant="globalXS"
            sx={{ color: colors.textColor }}
            noWrap
          >
            {shift.timeSlots
              .map(s => `${s.startTime} - ${s.endTime}`)
              .join(' · ')}
          </Typography>
        )}
        {shift.timeSlots.length === 0 && (
          <Typography
            variant="globalXS"
            sx={{ color: colors.textColor }}
          >
            {t('integration_shift')}
          </Typography>
        )}
      </Stack>
      <Typography
        variant="globalS"
        sx={{
          color: colors.textColor,
          whiteSpace: 'nowrap',
        }}
      >
        {programmedDisplay}
      </Typography>
      <MenuList
        size="small"
        position="left"
        options={menuOptions}
      />
    </Stack>
  );
};

export default RotationDayShiftLine;
