text: 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 />,
  });
  