import { memo } from 'react';

import { IconX } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuCheckbox from '@material-hu/components/design-system/Checkbox/Checkbox';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';

import { getInitials } from 'src/utils/userUtils';

import { JourneyAssignee } from '../../../types/task';

type FilterListItemProps = {
  collaborator: JourneyAssignee;
  selected?: boolean;
  isReadOnly?: boolean;
  onSelect: (collaborator: JourneyAssignee) => void;
};

const FilterListItem = ({
  collaborator,
  selected,
  isReadOnly,
  onSelect,
}: FilterListItemProps) => {
  return (
    <Stack
      onClick={isReadOnly ? undefined : () => onSelect(collaborator)}
      aria-disabled={selected}
      role="button"
      tabIndex={isReadOnly ? -1 : 0}
      aria-pressed={!isReadOnly ? !!selected : undefined}
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 2,
        p: 2,
        cursor: isReadOnly ? 'default' : 'pointer',
        ...(!isReadOnly && {
          '&:hover': {
            backgroundColor: ({ palette }) =>
              palette.new.background.elements.grey,
          },
        }),
      }}
    >
      {isReadOnly ? null : <HuCheckbox checked={selected} />}
      <HuListItem
        sx={{ width: '100%', justifyContent: 'center', '& li': { p: 0 } }}
        text={{ title: collaborator.fullName }}
        avatar={{
          src: collaborator.avatar.url || '',
          text: getInitials(collaborator.fullName),
        }}
        action={
          isReadOnly
            ? { Icon: IconX, onClick: () => onSelect(collaborator) }
            : undefined
        }
      />
    </Stack>
  );
};

export default memo(FilterListItem);
