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

import CardContainer from '@material-hu/components/design-system/CardContainer';

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

import { type RotationDay } from '../../../../form';

import RestDayLine from './RestDayLine';
import RotationDayShiftLine from './RotationDayShiftLine';

type Props = {
  item: RotationDay;
  index: number;
  dragHandleButton?: React.ReactNode;
  onRemove: (id: string) => void;
  onRemoveShift: (dayId: string, shiftId: number) => void;
};

const DAY_BADGE_WIDTH = 56;

const RotationDayCard = ({
  item,
  index,
  dragHandleButton,
  onRemove,
  onRemoveShift,
}: Props) => {
  const { t } = useLokaliseTranslation('shifts');
  const { palette, shape } = useTheme();

  return (
    <CardContainer
      padding={16}
      sx={{
        '& .MuiCardContent-root': {
          alignItems: 'stretch',
          display: 'flex',
          flexDirection: 'row',
          gap: 1.5,
        },
      }}
      fullWidth
      noHover
    >
      <Stack
        sx={{
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: palette.new.background.elements.grey,
          width: DAY_BADGE_WIDTH,
          borderRadius: shape.borderRadiusM,
          flexShrink: 0,
          gap: 0.25,
        }}
      >
        <Typography
          variant="globalXS"
          sx={{ color: palette.new.text.neutral.lighter }}
        >
          {t('templates.day')}
        </Typography>
        <Typography
          variant="globalM"
          sx={{ fontWeight: 'fontWeightSemiBold' }}
        >
          {index + 1}
        </Typography>
      </Stack>

      <Stack sx={{ justifyContent: 'center' }}>{dragHandleButton}</Stack>

      <Stack
        sx={{
          flex: 1,
          minWidth: 0,
          gap: 1,
        }}
      >
        {item.type === 'rest' && (
          <RestDayLine onRemove={() => onRemove(item.id)} />
        )}
        {item.type !== 'rest' &&
          item.shifts?.map(shift => (
            <RotationDayShiftLine
              key={shift.id}
              shift={shift}
              onRemove={() => onRemoveShift(item.id, shift.id)}
            />
          ))}
      </Stack>
    </CardContainer>
  );
};

export default RotationDayCard;
