TriggerFrontend/src/pages/settings/components/Search/DebouncedSearchProvider.tsx

import {
	Box,
	Card,
	type ComboboxItem,
	type ComboboxLikeRenderOptionInput,
	Group,
	Select,
	Stack,
	Text,
	TextInput,
} from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { DeleteItemModal, ManagementPill } from 'components';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { cardClasses, selectClasses, textClasses, textInputClasses } from 'styles';
import type { Provider } from 'types';

function DebouncedSearchProvider({
	searchProvider,
	setIsOpen,
	allIcons,
}: {
	searchProvider: Provider;
	setIsOpen: (isOpen: boolean) => void;
	allIcons: any;
}) {
	const { handleDelete, isMobile, theme } = useCommonHooks();
	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
	const { mutateAsync } = useMutationAPI();

	const [provider, setProvider] = useState<Provider>(searchProvider);
	const [update, setUpdate] = useState<any>({});
	const [debounced] = useDebouncedValue(update, 1000);

	const handleClose = () => {
		setIsOpen(false);
		closeModal();
	};

	useEffect(() => {
		if (Object.keys(debounced).length) {
			mutateAsync({ method: 'PATCH', endpoint: 'api/providers', body: debounced });
		}
	}, [debounced]);

	useEffect(() => {
		if (update !== provider && Object.keys(update).length) {
			setProvider(update);
		}
	}, [update]);

	return (
		<Card
			p={isMobile ? 'xl' : undefined}
			className={cardClasses.settingsItem}
			classNames={cardClasses}
		>
			<DeleteItemModal
				modalOpened={modalOpened}
				handleClose={handleClose}
				handleDelete={() => handleDelete(provider, 'api/providers')}
				title={'Delete Search Provider'}
				body={
					<Stack gap={0} w={'100%'} h={'150px'} align='center'>
						<Text>Are you sure you want to delete this Search Provider?</Text>
						<Text
							className={textClasses.deleteItem}
							classNames={textClasses}
						>{`"${provider.name}"`}</Text>
						<Text c='red'>This action cannot be undone!</Text>
					</Stack>
				}
			/>
			<Box
				style={{
					position: 'absolute',
					right: '1rem',
					top: '.5rem',
					zIndex: 1,
				}}
			>
				<ManagementPill
					enabled={provider.default}
					onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
						setUpdate({
							...provider,
							default: event.target.checked ? 1 : 0,
						});
					}}
					openModal={openModal}
					label={['Non-Default', 'Default']}
				/>
			</Box>

			<Stack w={'100%'} align='center'>
				<Group w={'100%'} justify='center' pos={'relative'}>
					<TextInput
						label={'Name'}
						className={textInputClasses.settingsItem}
						classNames={textInputClasses}
						defaultValue={provider.name}
						onChange={(event) => {
							setUpdate({
								...provider,
								name: event.target.value,
							});
						}}
						styles={
							theme.textShadowsEnabled
								? {
										label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
									}
								: undefined
						}
						w={'30%'}
					/>
					<TextInput
						label={'Prefix'}
						className={textInputClasses.settingsItem}
						classNames={textInputClasses}
						defaultValue={provider.prefix}
						onChange={(event) => {
							setUpdate({
								...provider,
								prefix: event.target.value,
							});
						}}
						styles={
							theme.textShadowsEnabled
								? {
										label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
									}
								: undefined
						}
						w={'30%'}
					/>
					<Select
						label={'Icon'}
						className={selectClasses.settingsItem}
						classNames={{
							wrapper: selectClasses.menuSelectWrapper,
							input: selectClasses.menuSelectInput,
							label: selectClasses.menuSelectLabel,
							options: selectClasses.menuSelectOptions,
							option: selectClasses.menuSelectOption,
							dropdown: selectClasses.dropdown,
						}}
						w={'30%'}
						mt={'.75rem'}
						limit={100}
						placeholder='Search for an icon...'
						defaultSearchValue={provider?.icon ?? ''}
						defaultValue={provider?.icon}
						data={Object.keys(allIcons).map((icon) => {
							return { value: icon, label: icon };
						})}
						comboboxProps={{
							zIndex: 3000,
						}}
						styles={
							theme.textShadowsEnabled
								? {
										label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
									}
								: undefined
						}
						onChange={(value: string | null) => {
							setUpdate({
								...provider,
								icon: value,
							});
						}}
						renderOption={(item: ComboboxLikeRenderOptionInput<ComboboxItem>) => {
							const Icon = allIcons[item.option.value];
							return (
								<Group>
									{item.option.value}
									<Icon />
								</Group>
							);
						}}
						searchable
						clearable
						maxDropdownHeight={175}
						onDropdownOpen={() => setIsOpen(true)}
						onDropdownClose={() => setIsOpen(false)}
					/>
				</Group>
				<TextInput
					label={'Url'}
					w={isMobile ? '80%' : '94%'}
					className={textInputClasses.settingsItem}
					classNames={textInputClasses}
					defaultValue={provider.url}
					onChange={(event) => {
						setUpdate({
							...provider,
							url: event.target.value,
						});
					}}
					styles={
						theme.textShadowsEnabled
							? {
									label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
								}
							: undefined
					}
				/>
			</Stack>
		</Card>
	);
}

export default DebouncedSearchProvider;