import {
	ActionIcon,
	Box,
	Button,
	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,
	modalClasses,
	textClasses,
	textInputClasses,
} from 'styles';
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<any>([]);
	const { theme, isMobile } = useCommonHooks();
	const { mutateAsync } = useMutationAPI();
	const [newProvider, setNewProvider] = useState<any>({});
	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
	const [searchValue, setSearchValue] = useState('');
	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
	const handleDelete = (application: any) => {
		mutateAsync({ method: 'DELETE', endpoint: endpoint, body: application });
	};
	useEffect(() => {
		if (providers && providersIsFetched) {
			setProviderData(
				providers.filter((a: any) =>
					a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
				),
			);
		}
	}, [providers, providersIsFetched, debouncedSearch]);

	return (
		<Stack>
			<Modal.Root
				size={'60%'}
				className={modalClasses.helpModal}
				classNames={modalClasses}
				opened={modalOpened}
				fullScreen={isMobile}
				onClose={() => {
					closeModal();
				}}
				style={{
					'--color-text-pri': theme.primaryColor,
					'--color-text-acc': theme.accentColor,
					'--color-background': theme.backgroundColor,
					'--color-border': theme.borderColor,
					'--color-search-background': theme.searchColor,
					'--image-background': `url(${theme.backgroundImage})`,
				}}
				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'}>
						<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='sm' />
							<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>
					</Modal.Body>
				</Modal.Content>
			</Modal.Root>
			<Group align='center'>
				<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>
				<TextInput
					className={textInputClasses.settingsItem}
					classNames={textInputClasses}
					autoFocus
					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: any) => (
						<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}
										handleDelete={handleDelete}
									/>
								</Popover.Dropdown>
							</Popover>
						</GridCol>
					))}
				</Grid>
			</Stack>
		</Stack>
	);
};
export default SearchProviderSettings;