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

import {
	ActionIcon,
	Box,
	Button,
	Card,
	Divider,
	Grid,
	GridCol,
	Group,
	Highlight,
	Modal,
	Popover,
	Stack,
	Text,
	TextInput,
} from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiHelpCircle, FiPlus } from 'react-icons/fi';
import {
	actionIconClasses,
	buttonClasses,
	cardClasses,
	modalClasses,
	textClasses,
	textInputClasses,
} from 'styles';
import type { Provider } from 'types';
import DebouncedSearchProvider from './DebouncedSearchProvider';
import SearchProviderSettingsItem from './SearchProviderSettingsItem';

const SearchProviderSettings = () => {
	const endpoint = 'api/providers';
	const { data: providers, isFetched: providersIsFetched } = useQueryAPI({
		endpoint: endpoint,
	});
	const [providerData, setProviderData] = useState<Provider[]>([]);
	const { theme, isMobile, modalStyle } = useCommonHooks();
	const { mutateAsync } = useMutationAPI();
	const [newProvider, setNewProvider] = useState<Provider>({
		id: undefined,
		name: '',
		url: '',
		prefix: '',
	});
	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
	const [searchValue, setSearchValue] = useState('');
	const [debouncedSearch] = useDebouncedValue(searchValue, 500);

	useEffect(() => {
		if (providers && providersIsFetched) {
			setProviderData(
				providers
					.filter((a: Provider) =>
						a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
					)
					.sort((a: Provider, b: Provider) => (a.prefix > b.prefix ? 1 : -1)),
			);
		}
	}, [providers, providersIsFetched, debouncedSearch]);

	return (
		<Stack>
			<Modal.Root
				size={'60%'}
				className={modalClasses.helpModal}
				classNames={modalClasses}
				opened={modalOpened}
				fullScreen={isMobile}
				onClose={() => {
					closeModal();
				}}
				style={modalStyle}
				closeOnEscape
				closeOnClickOutside
			>
				<Modal.Overlay />
				<Modal.Content>
					<Modal.Header>
						<Modal.Title>Add a new Search Provider</Modal.Title>
						<Modal.CloseButton />
					</Modal.Header>
					<Modal.Body pb={'2rem'}>
						<Card className={cardClasses.settingsItem} classNames={cardClasses}>
							<Stack gap={0} w={'100%'} align='center'>
								<Stack>
									<Group w={'100%'} justify='center'>
										<TextInput
											label={'Name'}
											className={textInputClasses.settingsItem}
											pt={16}
											classNames={textInputClasses}
											defaultValue={newProvider.name}
											onChange={(event) => {
												setNewProvider({
													...newProvider,
													name: event.target.value,
												});
											}}
										/>
										<TextInput
											label={'Prefix'}
											className={textInputClasses.settingsItem}
											pt={16}
											classNames={textInputClasses}
											defaultValue={newProvider.prefix}
											onChange={(event) => {
												setNewProvider({
													...newProvider,
													prefix: event.target.value,
												});
											}}
										/>
									</Group>
									<TextInput
										label={'Url'}
										className={textInputClasses.settingsItem}
										pt={16}
										classNames={textInputClasses}
										defaultValue={newProvider.url}
										onChange={(event) => {
											setNewProvider({
												...newProvider,
												url: event.target.value,
											});
										}}
									/>
								</Stack>
								<Divider color='black' my='lg' />
								<Group pos={'absolute'} bottom={8}>
									<Button
										color={'green'}
										styles={{ label: { color: 'black' } }}
										onClick={() => {
											if (newProvider) {
												mutateAsync({
													method: 'POST',
													endpoint: endpoint,
													body: newProvider,
												});
												closeModal();
											}
										}}
									>
										Save
									</Button>
									<Button
										color={'red'}
										styles={{ label: { color: 'black' } }}
										onClick={() => {
											closeModal();
										}}
									>
										Cancel
									</Button>
								</Group>
							</Stack>
						</Card>
					</Modal.Body>
				</Modal.Content>
			</Modal.Root>
			<Group align='center' justify='center' mt={'1rem'}>
				<Group w={isMobile ? undefined : '100%'}>
					<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
						Search Providers
					</Text>
					<Popover withArrow withOverlay withinPortal={false}>
						<Popover.Target>
							<ActionIcon
								className={actionIconClasses.settingsTooltip}
								classNames={actionIconClasses}
							>
								<FiHelpCircle />
							</ActionIcon>
						</Popover.Target>
						<Popover.Dropdown
							style={{
								color: theme.primaryColor,
								backgroundColor: theme.backgroundColor,
								width: '500px',
							}}
						>
							<Stack>
								<Text className={textClasses.settingsTooltip} classNames={textClasses}>
									{'Search providers and shortcuts can be configured here.'}
								</Text>
								<Highlight
									highlight={['Providers', 'search']}
									className={textClasses.settingsTooltip}
									classNames={textClasses}
									highlightStyles={{
										backgroundImage:
											'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
										fontWeight: 700,
										WebkitBackgroundClip: 'text',
										WebkitTextFillColor: 'transparent',
									}}
								>
									{
										'Providers can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.'
									}
								</Highlight>
							</Stack>
						</Popover.Dropdown>
					</Popover>
					<Button
						className={buttonClasses.tableButton}
						classNames={buttonClasses}
						onClick={openModal}
					>
						<FiPlus />
					</Button>
				</Group>
				<TextInput
					w={isMobile ? undefined : '35%'}
					pos={isMobile ? undefined : 'absolute'}
					className={textInputClasses.settingsItem}
					classNames={textInputClasses}
					autoFocus={!isMobile}
					placeholder='Search...'
					value={searchValue}
					onInput={(event: any) => {
						setSearchValue(event.target.value);
					}}
				/>
			</Group>
			<Stack w={'100%'} align='center'>
				<Grid columns={18} w={'75%'}>
					{providerData?.map((provider: Provider) => (
						<GridCol span={isMobile ? 18 : 6} key={provider.id}>
							<Popover withArrow withOverlay withinPortal={false}>
								<Popover.Target>
									<Box
										onClick={(e) => {
											e.stopPropagation();
										}}
									>
										<SearchProviderSettingsItem provider={provider} />
									</Box>
								</Popover.Target>
								<Popover.Dropdown>
									<DebouncedSearchProvider searchProvider={provider} />
								</Popover.Dropdown>
							</Popover>
						</GridCol>
					))}
				</Grid>
			</Stack>
		</Stack>
	);
};
export default SearchProviderSettings;