import React, { useEffect } from "react";
import {
	Box,
	Text,
	Flex,
	Image,
	useMediaQuery,
	Divider,
	SkeletonText,
	Button,
	Input,
} from "@chakra-ui/react";
import { useAuth0, withAuthenticationRequired } from "@auth0/auth0-react";
import FullPage from "../../comp/Skeletons/FullPage";
import axios from "axios";
import FormCard from "../../comp/Comp/FormCard";
import {
	Drawer,
	DrawerBody,
	DrawerHeader,
	DrawerOverlay,
	DrawerContent,
	useDisclosure,
} from "@chakra-ui/react";
import toast, { Toaster } from "react-hot-toast";

const Dashboard = () => {
	const { isLoading, user } = useAuth0();
	const [check] = useMediaQuery("(min-width: 1025px)");
	const { isOpen, onOpen, onClose } = useDisclosure();
	const [formName, setFormName] = React.useState();
	let userEmail = user.email;
	let apiKey = process.env.REACT_APP_APIKEY;
	let apiUrl = process.env.REACT_APP_HOSTURL;
	const [data, setData] = React.useState();
	const getData = async () => {
		let temp = await axios.get(apiUrl + "user/" + userEmail + "&" + apiKey);
		setData(temp.data[0]);
		console.log(data);
	};
	useEffect(() => {
		getData();
		if (data === undefined) {
			setTimeout(() => getData(), 2500);
		}
	}, []);
	let responses = 0;
	if (data) {
		for (let i = 0; i < data.forms.length; i++) {
			responses += data.forms[i].formData.length;
		}
	}

	const postApiData = async () => {
		let temp = await axios.post(apiUrl + "addForm/" + apiKey, {
			email: user.email,
			formName: formName,
			url: "",
		});
		getData();
	};
	const addNewForm = () => {
		if (formName === "") {
			toast.error("Form is empty😉");
		} else {
			//  console.log(data.forms[0].formName);
			let isCopy = false;
			for (let i = 0; i < data.forms.length; i++) {
				if (data.forms[i].formName === formName) {
					isCopy = true;
				}
			}
			if (isCopy) {
				toast.error("form with such name already exits ");
			} else {
				postApiData();
				setTimeout(() => getData(), 2000);
				onClose();
				setTimeout(
					() => toast.success("Form Have beeen added 😉"),
					2000
				);
			}
		}
	};

	return (
		<Box backgroundColor='whiteAlpha.100'>
			<Box
				padding='6'
				boxShadow='2xl'
				align='center'
				margin='2%'
				borderRadius={check ? "full" : "0 "}>
				<Flex align='center' flexDirection={check ? "row" : "column"}>
					<Flex>
						<Image src={user.picture} borderRadius='full' />
						<Text
							mt='10%'
							ml='20px'
							bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
							bgClip='text'
							fontSize={check ? "3xl" : "xl"}>
							{user.name}
						</Text>
					</Flex>

					<Flex align='center' ml={check ? "40%" : "10%"}>
						<Box>
							<Text
								bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
								bgClip='text'
								fontSize='3xl'>
								{data ? (
									responses
								) : (
									<SkeletonText></SkeletonText>
								)}
							</Text>
							<Text>Responses</Text>
						</Box>
						<Box ml='50%'>
							<Text
								bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
								bgClip='text'
								fontSize='3xl'>
								{data ? (
									data.forms.length
								) : (
									<SkeletonText></SkeletonText>
								)}
							</Text>

							<Text>Forms</Text>
						</Box>
					</Flex>
				</Flex>
			</Box>

			<Box
				padding='6'
				boxShadow='xl'
				margin='2%'
				borderRadius={check ? "25px" : "0 "}>
				<Flex justifyContent='space-between'>
					<Text
						margin='5%'
						bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
						bgClip='text'
						fontSize='3xl'>
						Forms
					</Text>
					<Button margin='5%' colorScheme='orange' onClick={onOpen}>
						New form
					</Button>
				</Flex>
				<Divider margin='2%' colorScheme='blackAlpha'></Divider>
				{data ? (
					data.forms.map((x) => (
						<FormCard
							formName={x.formName}
							responses={x.formData.length}
							formData={x.formData}
							redirectUrl={x.redirectUrl}
							email={userEmail}></FormCard>
					))
				) : (
					<>
						<SkeletonText mt='3' noOfLines={1}></SkeletonText>
						<SkeletonText mt='3' noOfLines={1}></SkeletonText>
					</>
				)}

				{data && data.forms.length === 0 ? (
					<>
						<Image
							src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629867315/kitekat-3_dlccdn.png'
							width='25%'
							height='25%'
							ml='38%'
						/>
						<Text align='center'>
							You haven't created a form Yet{" "}
						</Text>
					</>
				) : (
					<> </>
				)}
			</Box>
			<Drawer
				onClose={onClose}
				isOpen={isOpen}
				size={check ? "xs" : "xs"}>
				<DrawerOverlay />
				<DrawerContent>
					<DrawerHeader align='center'>
						<Text
							margin='1%'
							fontWeight='extraBold'
							fontSize='3xl'
							bgGradient='linear(to-l, #ec9f05 ,#ff4e00)'
							bgClip='text'>
							Add Form
						</Text>
						<Image src='https://res.cloudinary.com/dd0mtkqbr/image/upload/v1629884425/kitekat-17_ipr2uy.png' />
						<Text></Text>
					</DrawerHeader>
					<DrawerBody>
						<Box>
							<Flex>
								<Input
									onChange={(e) =>
										setFormName(e.target.value)
									}
									placeholder='Form Name'
								/>
								<Button
									ml='0.5%'
									colorScheme='orange'
									onClick={addNewForm}>
									{" "}
									&gt;{" "}
								</Button>
							</Flex>
						</Box>
						<Box></Box>
					</DrawerBody>
				</DrawerContent>
			</Drawer>

			<Toaster />
		</Box>
	);
};
export default withAuthenticationRequired(Dashboard, {
	onRedirecting: () => <FullPage />,
});