import React, { useState } from 'react';
import {
	Button,
	Center,
	Flex,
	Input,
	InputGroup,
	InputRightElement,
	Modal,
	ModalBody,
	ModalCloseButton,
	ModalContent,
	ModalFooter,
	ModalHeader,
	ModalOverlay,
	Switch,
	Text,
	useDisclosure,
	useToast,
} from '@chakra-ui/react';
import { FaMinusCircle, FaPlus } from 'react-icons/fa';
import { useClient } from 'urql';
import {
	ArrayInputOperations,
	WebhookInputDataFields,
	WebhookInputHeaderFields,
} from '../constants';
import {
	capitalizeFirstLetter,
	validateEventName,
	validateURI,
} from '../utils';
import { AddWebhook } from '../graphql/mutation';

interface headersDataType {
	[WebhookInputHeaderFields.KEY]: string;
	[WebhookInputHeaderFields.VALUE]: string;
}

interface headersValidatorDataType {
	[WebhookInputHeaderFields.KEY]: boolean;
	[WebhookInputHeaderFields.VALUE]: boolean;
}

const initHeadersData: headersDataType = {
	[WebhookInputHeaderFields.KEY]: '',
	[WebhookInputHeaderFields.VALUE]: '',
};

const initHeadersValidatorData: headersValidatorDataType = {
	[WebhookInputHeaderFields.KEY]: true,
	[WebhookInputHeaderFields.VALUE]: true,
};

interface webhookDataType {
	[WebhookInputDataFields.EVENT_NAME]: string;
	[WebhookInputDataFields.ENDPOINT]: string;
	[WebhookInputDataFields.ENABLED]: boolean;
	[WebhookInputDataFields.HEADERS]: headersDataType[];
}

interface validatorDataType {
	[WebhookInputDataFields.EVENT_NAME]: boolean;
	[WebhookInputDataFields.ENDPOINT]: boolean;
	[WebhookInputDataFields.HEADERS]: headersValidatorDataType[];
}

const initWebhookData: webhookDataType = {
	[WebhookInputDataFields.EVENT_NAME]: '',
	[WebhookInputDataFields.ENDPOINT]: '',
	[WebhookInputDataFields.ENABLED]: false,
	[WebhookInputDataFields.HEADERS]: [{ ...initHeadersData }],
};

const initWebhookValidatorData: validatorDataType = {
	[WebhookInputDataFields.EVENT_NAME]: true,
	[WebhookInputDataFields.ENDPOINT]: true,
	[WebhookInputDataFields.HEADERS]: [{ ...initHeadersValidatorData }],
};

const AddWebhookModal = () => {
	const client = useClient();
	const toast = useToast();
	const { isOpen, onOpen, onClose } = useDisclosure();
	const [loading, setLoading] = useState<boolean>(false);
	const [webhook, setWebhook] = useState<webhookDataType>({
		...initWebhookData,
	});
	const [validator, setValidator] = useState<validatorDataType>({
		...initWebhookValidatorData,
	});
	const inputChangehandler = (
		inputType: string,
		value: any,
		headerInputType: string = WebhookInputHeaderFields.KEY,
		headerIndex: number = 0
	) => {
		switch (inputType) {
			case WebhookInputDataFields.EVENT_NAME:
				setWebhook({ ...webhook, [inputType]: value });
				setValidator({
					...validator,
					[WebhookInputDataFields.EVENT_NAME]: validateEventName(value),
				});
				break;
			case WebhookInputDataFields.ENDPOINT:
				setWebhook({ ...webhook, [inputType]: value });
				setValidator({
					...validator,
					[WebhookInputDataFields.ENDPOINT]: validateURI(value),
				});
				break;
			case WebhookInputDataFields.ENABLED:
				setWebhook({ ...webhook, [inputType]: value });
				break;
			case WebhookInputDataFields.HEADERS:
				const updatedHeaders: any = [
					...webhook[WebhookInputDataFields.HEADERS],
				];
				const updatedHeadersValidatorData: any = [
					...validator[WebhookInputDataFields.HEADERS],
				];
				const otherHeaderInputType =
					headerInputType === WebhookInputHeaderFields.KEY
						? WebhookInputHeaderFields.VALUE
						: WebhookInputHeaderFields.KEY;
				updatedHeaders[headerIndex][headerInputType] = value;
				updatedHeadersValidatorData[headerIndex][headerInputType] =
					value.length > 0
						? updatedHeaders[headerIndex][otherHeaderInputType].length > 0
						: updatedHeaders[headerIndex][otherHeaderInputType].length === 0;
				updatedHeadersValidatorData[headerIndex][otherHeaderInputType] =
					value.length > 0
						? updatedHeaders[headerIndex][otherHeaderInputType].length > 0
						: updatedHeaders[headerIndex][otherHeaderInputType].length === 0;
				setWebhook({ ...webhook, [inputType]: updatedHeaders });
				setValidator({
					...validator,
					[inputType]: updatedHeadersValidatorData,
				});
				break;
			default:
				break;
		}
	};
	const updateHeaders = (operation: string, index: number = 0) => {
		switch (operation) {
			case ArrayInputOperations.APPEND:
				setWebhook({
					...webhook,
					[WebhookInputDataFields.HEADERS]: [
						...(webhook?.[WebhookInputDataFields.HEADERS] || []),
						{ ...initHeadersData },
					],
				});
				setValidator({
					...validator,
					[WebhookInputDataFields.HEADERS]: [
						...(validator?.[WebhookInputDataFields.HEADERS] || []),
						{ ...initHeadersValidatorData },
					],
				});
				break;
			case ArrayInputOperations.REMOVE:
				if (webhook?.[WebhookInputDataFields.HEADERS]?.length) {
					const updatedHeaders = [...webhook[WebhookInputDataFields.HEADERS]];
					updatedHeaders.splice(index, 1);
					setWebhook({
						...webhook,
						[WebhookInputDataFields.HEADERS]: updatedHeaders,
					});
				}
				if (validator?.[WebhookInputDataFields.HEADERS]?.length) {
					const updatedHeadersData = [
						...validator[WebhookInputDataFields.HEADERS],
					];
					updatedHeadersData.splice(index, 1);
					setValidator({
						...validator,
						[WebhookInputDataFields.HEADERS]: updatedHeadersData,
					});
				}
				break;
			default:
				break;
		}
	};
	const validateData = () => {
		return (
			!loading &&
			webhook[WebhookInputDataFields.EVENT_NAME].length > 0 &&
			webhook[WebhookInputDataFields.ENDPOINT].length > 0 &&
			validator[WebhookInputDataFields.EVENT_NAME] &&
			validator[WebhookInputDataFields.ENDPOINT] &&
			!validator[WebhookInputDataFields.HEADERS].some(
				(headerData: headersValidatorDataType) =>
					!headerData.key || !headerData.value
			)
		);
	};
	const saveData = async () => {
		if (!validateData()) return;
		setLoading(true);
		let { [WebhookInputDataFields.HEADERS]: _, ...params }: any = webhook;
		if (webhook[WebhookInputDataFields.HEADERS].length) {
			const headers = webhook[WebhookInputDataFields.HEADERS].reduce(
				(acc, data) => {
					return data.key ? { ...acc, [data.key]: data.value } : acc;
				},
				{}
			);
			if (Object.keys(headers).length) {
				params[WebhookInputDataFields.HEADERS] = headers;
			}
		}
		const res = await client.mutation(AddWebhook, { params }).toPromise();
		if (res.error) {
			toast({
				title: capitalizeFirstLetter(res.error.message),
				isClosable: true,
				status: 'error',
				position: 'bottom-right',
			});
			setLoading(false);
			return;
		} else if (res.data?._add_webhook) {
			toast({
				title: capitalizeFirstLetter(res.data?._add_webhook.message),
				isClosable: true,
				status: 'success',
				position: 'bottom-right',
			});
			setWebhook({
				...initWebhookData,
				[WebhookInputDataFields.HEADERS]: [{ ...initHeadersData }],
			});
			setValidator({ ...initWebhookValidatorData });
			onClose();
		}
		setLoading(false);
	};
	return (
		<>
			<Button
				leftIcon={<FaPlus />}
				colorScheme="blue"
				variant="solid"
				onClick={onOpen}
				isDisabled={false}
				size="sm"
			>
				<Center h="100%">Add Webhook</Center>{' '}
			</Button>
			<Modal isOpen={isOpen} onClose={onClose} size="3xl">
				<ModalOverlay />
				<ModalContent>
					<ModalHeader>Add New Webhook</ModalHeader>
					<ModalCloseButton />
					<ModalBody>
						<Flex
							flexDirection="column"
							border="1px"
							borderRadius="md"
							borderColor="gray.200"
							p="5"
						>
							<Flex
								width="100%"
								justifyContent="space-between"
								alignItems="center"
								marginBottom="2%"
							>
								<Flex flex="1">Event Name</Flex>
								<Flex flex="3">
									<InputGroup size="md">
										<Input
											pr="4.5rem"
											type="text"
											placeholder="user.login"
											value={webhook[WebhookInputDataFields.EVENT_NAME]}
											isInvalid={!validator[WebhookInputDataFields.EVENT_NAME]}
											onChange={(e) =>
												inputChangehandler(
													WebhookInputDataFields.EVENT_NAME,
													e.currentTarget.value
												)
											}
										/>
									</InputGroup>
								</Flex>
							</Flex>
							<Flex
								width="100%"
								justifyContent="start"
								alignItems="center"
								marginBottom="5%"
							>
								<Flex flex="1">Endpoint</Flex>
								<Flex flex="3">
									<InputGroup size="md">
										<Input
											pr="4.5rem"
											type="text"
											placeholder="https://domain.com/webhook"
											value={webhook[WebhookInputDataFields.ENDPOINT]}
											isInvalid={!validator[WebhookInputDataFields.ENDPOINT]}
											onChange={(e) =>
												inputChangehandler(
													WebhookInputDataFields.ENDPOINT,
													e.currentTarget.value
												)
											}
										/>
									</InputGroup>
								</Flex>
							</Flex>
							<Flex
								width="100%"
								justifyContent="space-between"
								alignItems="center"
								marginBottom="5%"
							>
								<Flex flex="1">Enabled</Flex>
								<Flex w="25%" justifyContent="space-between">
									<Text h="75%" fontWeight="bold" marginRight="2">
										Off
									</Text>
									<Switch
										size="md"
										isChecked={webhook[WebhookInputDataFields.ENABLED]}
										onChange={() =>
											inputChangehandler(
												WebhookInputDataFields.ENABLED,
												!webhook[WebhookInputDataFields.ENABLED]
											)
										}
									/>
									<Text h="75%" fontWeight="bold" marginLeft="2">
										On
									</Text>
								</Flex>
							</Flex>
							<Flex
								width="100%"
								justifyContent="space-between"
								alignItems="center"
								marginBottom="2%"
							>
								<Flex>Headers</Flex>
								<Flex>
									<Button
										leftIcon={<FaPlus />}
										colorScheme="blue"
										h="1.75rem"
										size="sm"
										variant="ghost"
										paddingRight="0"
										onClick={() => updateHeaders(ArrayInputOperations.APPEND)}
									>
										Add more Headers
									</Button>
								</Flex>
							</Flex>
							<Flex flexDirection="column" maxH={220} overflowY="scroll">
								{webhook[WebhookInputDataFields.HEADERS]?.map(
									(headerData, index) => (
										<Flex
											key={`header-data-${index}`}
											justifyContent="center"
											alignItems="center"
										>
											<InputGroup size="md" marginBottom="2.5%">
												<Input
													type="text"
													placeholder="key"
													value={headerData[WebhookInputHeaderFields.KEY]}
													isInvalid={
														!validator[WebhookInputDataFields.HEADERS][index]?.[
															WebhookInputHeaderFields.KEY
														]
													}
													onChange={(e) =>
														inputChangehandler(
															WebhookInputDataFields.HEADERS,
															e.target.value,
															WebhookInputHeaderFields.KEY,
															index
														)
													}
													width="30%"
													marginRight="2%"
												/>
												<Center marginRight="2%">
													<Text fontWeight="bold">:</Text>
												</Center>
												<Input
													type="text"
													placeholder="value"
													value={headerData[WebhookInputHeaderFields.VALUE]}
													isInvalid={
														!validator[WebhookInputDataFields.HEADERS][index]?.[
															WebhookInputHeaderFields.VALUE
														]
													}
													onChange={(e) =>
														inputChangehandler(
															WebhookInputDataFields.HEADERS,
															e.target.value,
															WebhookInputHeaderFields.VALUE,
															index
														)
													}
													width="65%"
												/>
												<InputRightElement width="3rem">
													<Button
														width="6rem"
														colorScheme="blackAlpha"
														variant="ghost"
														padding="0"
														onClick={() =>
															updateHeaders(ArrayInputOperations.REMOVE, index)
														}
													>
														<FaMinusCircle />
													</Button>
												</InputRightElement>
											</InputGroup>
										</Flex>
									)
								)}
							</Flex>
						</Flex>
					</ModalBody>
					<ModalFooter>
						<Button
							colorScheme="blue"
							variant="solid"
							onClick={saveData}
							isDisabled={!validateData()}
						>
							<Center h="100%" pt="5%">
								Save
							</Center>
						</Button>
					</ModalFooter>
				</ModalContent>
			</Modal>
		</>
	);
};

export default AddWebhookModal;