import { type FC } from 'react';

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

import CollapsibleAutocompleteSelector, {
  type CollapsibleAutocompleteSelectorProps,
} from '@material-hu/components/composed-components/CollapsibleAutocompleteSelector';
import Avatar from '@material-hu/components/design-system/Avatar';
import Title from '@material-hu/components/design-system/Title';

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

type Props = Omit<
  CollapsibleAutocompleteSelectorProps<User>,
  'customMapper' | 'itemRenderer' | 'rowHeight'
>;

// Accommodates avatar + two-line Title (name + employeeInternalId).
const USER_ROW_HEIGHT = 72;

const UserCollapsibleAutocompleteSelector: FC<Props> = props => (
  <CollapsibleAutocompleteSelector<User>
    {...(props as CollapsibleAutocompleteSelectorProps<User>)}
    rowHeight={USER_ROW_HEIGHT}
    customMapper={user => ({
      value: user.id,
      name: getFullName(user),
    })}
    itemRenderer={(user, displayOption) => (
      <Stack
        direction="row"
        alignItems="center"
        gap={1}
        sx={{ minWidth: 0, flex: 1 }}
      >
        <Avatar
          size="small"
          color="primary"
          src={user.profilePicture ?? undefined}
          text={
            !user.profilePicture ? getInitials(getFullName(user)) : undefined
          }
        />
        <Stack sx={{ minWidth: 0 }}>
          <Title
            variant="S"
            title={displayOption.name}
            description={user.employeeInternalId}
          />
        </Stack>
      </Stack>
    )}
  />
);

export default UserCollapsibleAutocompleteSelector;