import { IconCheck, IconChevronRight } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuSelectionCard from '@material-hu/components/composed-components/SelectionCard';

import ProfilePicture from 'src/components/user/ProfilePicture';

import { type NavigationSidebarItemUser } from './types';

type NavigationSidebarRowProps<T> = {
  item: T;
  isSelected: boolean;
  isCompleted: boolean;
  primaryLabel: string;
  user: NavigationSidebarItemUser;
  onSelect: (item: T) => void;
};

const NavigationSidebarRow = <T,>({
  item,
  isSelected,
  isCompleted,
  primaryLabel,
  user,
  onSelect,
}: NavigationSidebarRowProps<T>) => {
  const theme = useTheme();
  const palette = theme.palette as typeof theme.palette & {
    new?: {
      background?: { feedback?: { success?: string } };
      border?: { states?: { success?: string } };
      icon?: { feedback?: { success?: string } };
    };
  };

  return (
    <HuSelectionCard
      checked={isSelected}
      onClick={() => onSelect(item)}
      fullWidth
      sx={{
        borderRadius: 2,
        '& .MuiCardContent-root': {
          py: 1.5,
          px: 2,
        },
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 1.5,
          width: '100%',
          minWidth: 0,
        }}
      >
        <ProfilePicture
          id={user.id as number}
          user={user}
          size="medium"
          sx={{ flexShrink: 0 }}
        />
        <Typography
          variant="body2"
          fontWeight="fontWeightSemiBold"
          color="text.primary"
          sx={{ flex: 1, minWidth: 0 }}
          noWrap
        >
          {primaryLabel}
        </Typography>
        {isCompleted && (
          <Stack
            sx={{
              width: 24,
              height: 24,
              borderRadius: '50%',
              backgroundColor: palette.new?.background?.feedback?.success,
              border: `1px solid ${palette.new?.border?.states?.success}`,
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
            }}
          >
            <IconCheck
              size={14}
              color={palette.new?.icon?.feedback?.success}
              aria-hidden
            />
          </Stack>
        )}
        <IconButton
          size="large"
          aria-hidden
          disableRipple
          tabIndex={-1}
          sx={{ flexShrink: 0, pointerEvents: 'none' }}
        >
          <IconChevronRight size={20} />
        </IconButton>
      </Stack>
    </HuSelectionCard>
  );
};

export default NavigationSidebarRow;