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 { type Shift } from 'src/types/shifts';
import { useLokaliseTranslation } from 'src/utils/i18n';

import EllipsisTooltip from 'src/components/EllipsisTooltip';

import { useShiftDisplay } from './useShiftDisplay';

type Props = {
  shift: Shift;
  isSelected: boolean;
  onToggle: (shift: Shift) => void;
};

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

  return (
    <CardContainer
      onClick={() => onToggle(shift)}
      sx={{
        borderRadius: theme.shape.borderRadiusM,
        borderColor: `${colors.accentBorderColor} !important`,
        backgroundColor: isSelected
          ? `${theme.palette.new.background.layout.brand} !important`
          : undefined,
        '& .MuiCardContent-root': {
          alignItems: 'center',
          display: 'flex',
          flexDirection: 'row',
          gap: 1,
          px: 1.5,
          py: 1,
        },
      }}
      fullWidth
    >
      <Stack sx={{ flex: 1, minWidth: 0 }}>
        <EllipsisTooltip title={shift.name || t('time_tracker:unnamed_shift')}>
          <Typography
            variant="globalS"
            sx={{ fontWeight: 'fontWeightSemiBold' }}
            noWrap
          >
            {shift.name || t('time_tracker:unnamed_shift')}
          </Typography>
        </EllipsisTooltip>
        {shift.timeSlots.length > 0 ? (
          <Typography
            variant="globalXS"
            sx={{ color: theme.palette.new.text.neutral.lighter }}
            noWrap
          >
            {shift.timeSlots
              .map(slot => `${slot.startTime} - ${slot.endTime}`)
              .join(' · ')}
          </Typography>
        ) : (
          <Typography
            variant="globalXS"
            sx={{ color: theme.palette.new.text.neutral.lighter }}
          >
            {t('integration_shift')}
          </Typography>
        )}
      </Stack>
      {shift.timeSlots.length > 0 && (
        <Typography
          variant="globalS"
          sx={{
            color: theme.palette.new.text.neutral.lighter,
            whiteSpace: 'nowrap',
          }}
        >
          {programmedDisplay}
        </Typography>
      )}
    </CardContainer>
  );
};

export default ShiftSelectorItem;
