import { memo } from 'react';

import { Stack } from '@material-hu/mui/index';

import HuUserAvatar from '@material-hu/components/composed-components/UserAvatar';
import Checkbox from '@material-hu/components/design-system/Checkbox/Checkbox';
import RadioBase from '@material-hu/components/design-system/RadioButton/RadioBase';

import { type User } from 'src/types/user';

import { type SelectionMode } from '../shared/PeopleSelection';

type PeopleItemListProps = {
  user: User;
  isSelected: boolean;
  handleSelectUser: (user: User) => void;
  selectionMode?: SelectionMode;
};

const PeopleItemList = ({
  user,
  isSelected,
  handleSelectUser,
  selectionMode = 'multiple',
}: PeopleItemListProps) => {
  const isSingleMode = selectionMode === 'single';

  return (
    <Stack
      key={`${user.id}-${user.employeeInternalId}`}
      sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}
    >
      {isSingleMode && (
        <RadioBase
          checked={isSelected}
          onChange={() => handleSelectUser(user)}
        />
      )}
      {!isSingleMode && (
        <Checkbox
          checked={isSelected}
          onChange={() => handleSelectUser(user)}
        />
      )}
      <HuUserAvatar
        user={user}
        profileProps={{ showEmployeeInternalId: true }}
        sx={{ maxWidth: 500 }}
      />
    </Stack>
  );
};

export default memo(PeopleItemList);