import {useMemo, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {InputSelectController, InputSelectControllerProps} from '@components';
import {useDebounce} from '@hooks/useDebounce';
import {useGetUsersPublic} from '@hooks/useGetUsersPublic';
import {getCompleteName} from '@shared/utils/generics';

import {InputApplyClearSelectController} from '../InputApplyClearSelect';

type InputSelectUserProps = Omit<
  InputSelectControllerProps<number>,
  'options'
> & {
  showCount?: boolean;
};

function InputSelectUser({
  name,
  label,
  placeholder,
  multipleSelect,
  showCount,
}: InputSelectUserProps) {
  const {t} = useTranslation();
  const [filterText, setFilterText] = useState('');
  const search = useDebounce(filterText);
  const {data: users, getNextPage} = useGetUsersPublic({
    search,
  });

  const options = useMemo(
    () =>
      users?.map(user => ({
        id: user.id,
        label: getCompleteName(user) || '',
        AvatarProps: {
          name: user,
          url: user.profilePicture || '',
        },
      })) || [],
    [users],
  );

  const commonProps = {
    name,
    label,
    placeholder,
    options,
    filterable: true,
    searchPlaceholder: t('general.search'),
    menuTitle: label,
    enableDynamicSizing: true,
    onFilterText: setFilterText,
    onEndReached: getNextPage,
  };

  return multipleSelect ? (
    <InputApplyClearSelectController {...commonProps} showCount={showCount} />
  ) : (
    <InputSelectController {...commonProps} />
  );
}

export default InputSelectUser;