upstream-rocketchat/apps/meteor/client/views/omnichannel/components/AutoCompleteContact/AutoCompleteContact.tsx

import type { Serialized } from '@rocket.chat/core-typings';
import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
import type { ILivechatContactWithManagerData } from '@rocket.chat/rest-typings';
import type { ComponentProps, ReactNode, SyntheticEvent } from 'react';
import { memo, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { useContactsList } from './useContactsList';

type OptionProps = {
	role: 'option';
	title?: string;
	index: number;
	label: string;
	value: string;
	selected: boolean;
	focus: boolean;
	onMouseDown(event: SyntheticEvent): void;
};

export type AutoCompleteContactProps = Omit<
	ComponentProps<typeof PaginatedSelectFiltered>,
	'filter' | 'setFilter' | 'options' | 'endReached' | 'renderItem' | 'value' | 'onChange'
> & {
	value: string;
	onChange: (value: string) => void;
	renderItem?: (props: OptionProps, contact: Serialized<ILivechatContactWithManagerData>) => ReactNode;
};

const AutoCompleteContact = ({ value, placeholder, disabled, renderItem, onChange, ...props }: AutoCompleteContactProps) => {
	const { t } = useTranslation();
	const [contactsFilter, setContactFilter] = useState<string>('');
	const debouncedContactFilter = useDebouncedValue(contactsFilter, 500);

	const {
		data: contactsItems = [],
		fetchNextPage,
		isPending,
	} = useContactsList({
		filter: debouncedContactFilter,
	});

	return (
		<PaginatedSelectFiltered
			{...props}
			aria-busy={isPending}
			placeholder={isPending ? t('Loading...') : placeholder}
			aria-disabled={isPending || disabled}
			disabled={isPending || disabled}
			value={value}
			flexShrink={0}
			filter={contactsFilter}
			setFilter={setContactFilter as (value: string | number | undefined) => void}
			options={contactsItems}
			onChange={onChange}
			endReached={() => fetchNextPage()}
			renderItem={renderItem ? (props: OptionProps) => renderItem(props, contactsItems[props.index]) : undefined}
		/>
	);
};

export default memo(AutoCompleteContact);