import { useEffect, useState } from 'react';

import Stack from '@material-hu/mui/Stack';
import Checkbox from '@material-hu/components/design-system/Checkbox/Checkbox';
import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuTableCell from '@material-hu/components/design-system/Table/components/TableCell';
import HuTitle from '@material-hu/components/design-system/Title';

import { type ShiftCalendarUser } from 'src/types/shifts';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { parseHoursAndMinutesDisplay } from 'src/utils/timeTracking';

import { TABLE_HEADERS_IDS } from '../../constants';

import { SELECTION_COL_WIDTH, STICKY_COLUMN_SX } from './constants';

type Props = {
  register: ShiftCalendarUser;
  onCollabActionsClick: (userId: string | number) => void;
  selected: boolean;
  isRowSelectionActive: boolean;
  showRadioButton: boolean;
  collapseMarginLeft: boolean;
};

const COLLAPSE_MARGIN_LEFT = '14px';

const CollaboratorCell = ({
  register,
  onCollabActionsClick,
  selected,
  isRowSelectionActive,
  showRadioButton = false,
  collapseMarginLeft = false,
}: Props) => {
  const { t } = useLokaliseTranslation(['shifts', 'time_tracking_common']);
  const [isHovered, setIsHovered] = useState(false);
  const [skipTransition, setSkipTransition] = useState(false);

  useEffect(() => {
    setSkipTransition(true);
    const id = setTimeout(() => setSkipTransition(false), 250);
    return () => clearTimeout(id);
  }, [selected]);

  const programmedHoursDescription = `${t('shift_programmed_hours')} ${t(...parseHoursAndMinutesDisplay(register.shiftScheduleHours.published, true))}`;
  return (
    <HuTableCell
      sx={{
        ...STICKY_COLUMN_SX,
        backgroundColor: ({ palette }) =>
          palette.new.background.elements.default,
        left: isRowSelectionActive ? SELECTION_COL_WIDTH : 0,
        ...(selected && {
          backgroundColor: ({ palette }) => palette.new.background.layout.brand,
          boxShadow: 'none',
        }),
        '&:hover .MuiIconButton-root': {
          opacity: 1,
          cursor: 'pointer',
        },
        paddingLeft: collapseMarginLeft ? COLLAPSE_MARGIN_LEFT : 3,
      }}
      headers={TABLE_HEADERS_IDS.collaboratorHeader}
    >
      <Stack
        sx={{
          alignItems: 'center',
          flexDirection: 'row',
          gap: 1,
          overflow: 'hidden',
          position: 'relative',
        }}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        {showRadioButton && (
          <Stack
            component="span"
            sx={{
              transition: 'opacity 0.2s ease',
              pointerEvents: isHovered ? 'auto' : 'none',
              position: 'absolute',
              opacity: isHovered ? 1 : 0,
            }}
          >
            <Checkbox
              checked={selected}
              onChange={() => {
                onCollabActionsClick(register.userId);
              }}
            />
          </Stack>
        )}

        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1,
            transform: `translateX(${isHovered && showRadioButton ? 40 : 0}px)`,
            transition:
              isHovered && showRadioButton && !skipTransition
                ? 'transform 0.2s ease-in-out'
                : 'none',
          }}
        >
          <HuAvatar
            src={register.profilePicture || ''}
            size="small"
          />

          <HuTitle
            variant="M"
            title={register.fullName}
            description={programmedHoursDescription}
            overflow="tooltip"
            withEllipsis
            sx={{
              overflow: 'hidden',
              width: '100%',
              height: '100%',
              '& .MuiTypography-root': { fontSize: 14 },
              '& .MuiTypography-globalXS': { fontSize: 12 },
            }}
          />
        </Stack>
      </Stack>
    </HuTableCell>
  );
};

export default CollaboratorCell;
