import { type FC } from 'react';

import Stack from '@material-hu/mui/Stack';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import HuCheckbox from '@material-hu/components/design-system/Checkbox/Checkbox';
import HuPills from '@material-hu/components/design-system/Pills';
import HuTitle from '@material-hu/components/design-system/Title';

import { type User } from 'src/types/user';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullname, getInitials } from 'src/utils/userUtils';

type Props = {
  agent: User;
  onSelect: (agent: User) => void;
  selected: boolean;
  disabledCheckbox?: boolean;
  disabledPill?: boolean;
};

const AgentSelectionListItem: FC<Props> = ({
  agent,
  onSelect,
  selected,
  disabledCheckbox,
  disabledPill = false,
}) => {
  const { t } = useLokaliseTranslation('service_management');

  return (
    <Stack
      onClick={() => onSelect(agent)}
      sx={{
        gap: 1,
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: disabledPill ? 'space-between' : 'flex-start',
        width: 1,
        cursor: disabledCheckbox ? 'default' : 'pointer',
      }}
    >
      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1, py: 2 }}>
        <HuCheckbox
          disabled={disabledCheckbox}
          checked={selected}
          onChange={() => onSelect(agent)}
        />
        <HuAvatar
          src={agent.profilePicture || undefined}
          text={getInitials(getFullname(agent))}
        />
        <HuTitle
          title={getFullname(agent)}
          variant="S"
        />
      </Stack>
      {disabledPill && (
        <HuPills
          hasIcon={false}
          label={t('agent_added')}
          size="small"
          type="neutral"
        />
      )}
    </Stack>
  );
};

export default AgentSelectionListItem;