import React, {useState} from "react";
import {Box, Button, HStack, Image, Input, Stack, Text,} from "@chakra-ui/react";


const ForgotPassword = () => {
    const [email, setEmail] = useState();
    const backArrow = "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/babu_back_arrow.svg?alt=media&token=1acaf12e-4496-4ef0-aaae-c3bfca9c2b5f"
    return (
        <Box h="100vh" bg="#051E61">
            <Stack
                bg="rgba(192,192,192,0.1)"
                h="100vh"
                position="absolute"
                top="0px"
                right="0px"
                left="0px"
            >
                <Stack
                    bg="white"
                    borderRadius="16px 16px 0px 0px"
                    boxShadow="lg"
                    w="100%"
                    h="90vh"
                    position="absolute"
                    bottom="0px"
                    align="center"
                    spacing={"46px"}
                    p={"25px"}
                >
                    <HStack spacing={"28px"} w="100%">
                        <Image w="20px" h="18px" src={backArrow}/>
                        <Text
                            color="#051E61"
                            fontSize="22px"
                            fontFamily={"ABC"}
                            fontStyle="normal"
                            fontWeight="700"
                            lineHeight="26.6px"
                            textAlign={"left"}
                            letterSpacing="0.04px"
                        >
                            Forgot Password
                        </Text>
                    </HStack>

                    <Stack w="100%" spacing={"36px"}>
                        <Stack h="69px">
                            <Text
                                color="#929CB5"
                                fontSize="12px"
                                fontFamily={"ABCMedium"}
                                fontStyle="normal"
                                fontWeight="400"
                                lineHeight="15px"
                                textAlign={"left"}
                                letterSpacing="0.04px"
                                display={!email ? "none" : "flex"}
                            >
                                Email Address
                            </Text>
                            <Input
                                px="0px"
                                pb="32px"
                                pt="14px"
                                name="email"
                                border="none"
                                color="#101C45"
                                fontSize="16px"
                                fontFamily={"MaisonBook"}
                                fontStyle="normal"
                                fontWeight="400"
                                lineHeight="24px"
                                textAlign={"left"}
                                letterSpacing="0.04px"
                                placeholder="Email"
                                onChange={(e: any) => {
                                    setEmail(e.target.value);
                                }}
                                _placeholder={{
                                    fontSize: "14px",
                                    fontFamily: "MaisonMedium",
                                    fontStyle: "normal",
                                    fontWeight: "400",
                                    lineHeight: "24px",
                                    textAlign: "left",
                                    letterSpacing: "0.04px",
                                }}
                                _focus={{
                                    borderBottom: "1px solid #ADB4C7",
                                }}
                                borderBottom="1px solid #ADB4C7"
                                borderRadius="none"
                                isRequired
                            />
                        </Stack>

                        <Button
                            h="54px"
                            fontSize="22px"
                            fontFamily={"ABCMedium"}
                            fontStyle="normal"
                            fontWeight="400"
                            lineHeight="16px"
                            letterSpacing="0.3px"
                            _disabled={{
                                backgroundColor: "rgba(18, 18, 18, 0.3)",
                                color: "rgba(255, 255, 255, 1)",
                            }}
                            disabled={!email ? true : false}
                            bg="#43C6A1"
                            color="white"
                            padding="17px, 19px, 19px, 19px "
                            w="327px"
                            position={"absolute"}
                            alignSelf={"center"}
                            bottom="40px"
                            borderRadius={"12px"}
                            _hover={!email ? {backgroundColor: "rgba(18, 18, 18, 0.3)"} : {backgroundColor: "#43C6A1"}}

                        >
                            Reset Password
                        </Button>
                    </Stack>
                </Stack>
            </Stack>
        </Box>
    );
};

export default ForgotPassword;

// import React, { useState } from "react";
// import "../../index.css";
// import {
//   Stack,
//   HStack,
//   Textarea,
//   Button,
//   Box,
//   Text,
//   Center,
//   Flex,
//   Select,
//   Image,
//   Input,
//   InputGroup,
//   InputRightElement,
//   InputLeftElement,
// } from "@chakra-ui/react";
//
//
// const ForgotPassword = () => {
//   const [email, setEmail] = useState();
//   const backArrow="https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/babu_back_arrow.svg?alt=media&token=1acaf12e-4496-4ef0-aaae-c3bfca9c2b5f"
//   return (
//     <Box h="100vh" bg="#051E61">
//       <Stack
//         bg="rgba(192,192,192,0.1)"
//         h="100vh"
//         position="absolute"
//         top="0px"
//         right="0px"
//         left="0px"
//       >
//         <Stack
//           bg="white"
//           borderRadius="16px 16px 0px 0px"
//           boxShadow="lg"
//           w="100%"
//           h="90vh"
//           position="absolute"
//           bottom="0px"
//           align="center"
//           spacing={"46px"}
//           p={"25px"}
//         >
//           <HStack spacing={"28px"} w="100%">
//             <Image w="20px" h="18px" src={backArrow} />
//             <Text
//               color="#051E61"
//               fontSize="22px"
//               fontFamily={"ABC"}
//               fontStyle="normal"
//               fontWeight="700"
//               lineHeight="26.6px"
//               textAlign={"left"}
//               letterSpacing="0.04px"
//             >
//               Forgot Password
//             </Text>
//           </HStack>
//
//           <Stack w="100%" spacing={"36px"}>
//             <Stack h="69px">
//               <Text
//                 color="#929CB5"
//                 fontSize="12px"
//                 fontFamily={"ABCMedium"}
//                 fontStyle="normal"
//                 fontWeight="400"
//                 lineHeight="15px"
//                 textAlign={"left"}
//                 letterSpacing="0.04px"
//                 display={!email ? "none" : "flex"}
//               >
//                 Email Address
//               </Text>
//               <Input
//                 px="0px"
//                 pb="32px"
//                 pt="14px"
//                 name="email"
//                 border="none"
//                 color="#101C45"
//                 fontSize="16px"
//                 fontFamily={"MaisonBook"}
//                 fontStyle="normal"
//                 fontWeight="400"
//                 lineHeight="24px"
//                 textAlign={"left"}
//                 letterSpacing="0.04px"
//                 placeholder="Email"
//                 onChange={(e: any) => {
//                   setEmail(e.target.value);
//                 }}
//                 _placeholder={{
//                   fontSize: "14px",
//                   fontFamily: "MaisonMedium",
//                   fontStyle: "normal",
//                   fontWeight: "400",
//                   lineHeight: "24px",
//                   textAlign: "left",
//                   letterSpacing: "0.04px",
//                 }}
//                 _focus={{
//                   borderBottom: "1px solid #ADB4C7",
//                 }}
//                 borderBottom="1px solid #ADB4C7"
//                 borderRadius="none"
//                 isRequired
//               />
//             </Stack>
//
//             <Button
//               h="54px"
//               fontSize="22px"
//               fontFamily={"ABCMedium"}
//               fontStyle="normal"
//               fontWeight="400"
//               lineHeight="16px"
//               letterSpacing="0.3px"
//               _disabled={{
//                 backgroundColor: "rgba(18, 18, 18, 0.3)",
//                 color: "rgba(255, 255, 255, 1)",
//               }}
//               disabled={!email ? true : false}
//               bg="#43C6A1"
//               color="white"
//               Padding="17px, 19px, 19px, 19px "
//               w="327px"
//               position={"absolute"}
//               alignSelf={"center"}
//               bottom="40px"
//               borderRadius={"12px"}
//               _hover={!email ?{backgroundColor:"rgba(18, 18, 18, 0.3)"}:{backgroundColor:"#43C6A1"}}
//
//             >
//               Reset Password
//             </Button>
//           </Stack>
//         </Stack>
//       </Stack>
//     </Box>
//   );
// };
//
// export default ForgotPassword;