import {
	ActionIcon,
	Button,
	Card,
	Group,
	Stack,
	Text,
	TextInput,
	Tooltip,
} from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FiTrash } from 'react-icons/fi';
import { cardClasses, textInputClasses } from 'styles';
import type { Provider } from 'types';
import DeleteItemModal from '../Shared/DeleteItemModal';

function DebouncedSearchProvider({ searchProvider }: any) {
	const { theme, handleDelete } = 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);

	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}>
			<DeleteItemModal
				modalOpened={modalOpened}
				handleClose={closeModal}
				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
							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, 'api/providers');
									closeModal();
								}}
							>
								Delete
							</Button>
							<Button
								color={'grey'}
								styles={{ label: { color: 'black' } }}
								onClick={() => {
									closeModal();
								}}
							>
								Cancel
							</Button>
						</Group>
					</Stack>
				}
			/>
			<Tooltip
				color={theme.primaryColor}
				bd={`solid 1px ${theme.borderColor}`}
				label={'Delete'}
			>
				<ActionIcon
					pos={'absolute'}
					right={16}
					color='red'
					onClick={() => {
						openModal();
					}}
				>
					<FiTrash />
				</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;