import {
	ActionIcon,
	Button,
	Card,
	Group,
	Modal,
	Stack,
	Text,
	TextInput,
	Tooltip,
} from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { IconTrash } from '@tabler/icons-react';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { cardClasses, modalClasses, textInputClasses } from 'styles';

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

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

	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 className={cardClasses.settingsItem} classNames={cardClasses}>
			<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>Delete Search Provider</Modal.Title>
						<Modal.CloseButton />
					</Modal.Header>
					<Modal.Body pb={'2rem'}>
						<Stack gap={0} w={'100%'} h={'150px'} align='center'>
							<Text>Are you sure you want to delete this Search Provider?</Text>
							<Text
								style={{
									fontWeight: 'bold',
									fontSize: '20px',
									padding: '8px',
									margin: '8px',
									borderRadius: '10px',
									backgroundColor: 'var(--color-text-acc)',
									color: 'var(--color-background)',
								}}
							>{`"${provider.name}"`}</Text>
							<Text c='red'>This action cannot be undone!</Text>
							<Group pos={'absolute'} bottom={8}>
								<Button
									color={'red'}
									styles={{ label: { color: 'black' } }}
									onClick={() => {
										handleDelete(provider);
										closeModal();
									}}
								>
									Delete
								</Button>
								<Button
									color={'grey'}
									styles={{ label: { color: 'black' } }}
									onClick={() => {
										closeModal();
									}}
								>
									Cancel
								</Button>
							</Group>
						</Stack>
					</Modal.Body>
				</Modal.Content>
			</Modal.Root>
			<Tooltip
				color={theme.primaryColor}
				bd={`solid 1px ${theme.borderColor}`}
				label={'Delete'}
			>
				<ActionIcon
					pos={'absolute'}
					right={16}
					color='red'
					onClick={() => {
						openModal();
					}}
				>
					<IconTrash />
				</ActionIcon>
			</Tooltip>
			<Stack>
				<Group w={'100%'} justify='center'>
					<TextInput
						label={'Name'}
						className={textInputClasses.settingsItem}
						pt={16}
						classNames={textInputClasses}
						defaultValue={provider.name}
						onChange={(event) => {
							setUpdate({
								...provider,
								name: event.target.value,
							});
						}}
					/>
					<TextInput
						label={'Prefix'}
						className={textInputClasses.settingsItem}
						pt={16}
						classNames={textInputClasses}
						defaultValue={provider.prefix}
						onChange={(event) => {
							setUpdate({
								...provider,
								prefix: event.target.value,
							});
						}}
					/>
				</Group>
				<TextInput
					label={'Url'}
					className={textInputClasses.settingsItem}
					pt={16}
					classNames={textInputClasses}
					defaultValue={provider.url}
					onChange={(event) => {
						setUpdate({
							...provider,
							url: event.target.value,
						});
					}}
				/>
			</Stack>
		</Card>
	);
}

export default DebouncedSearchProvider;