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

let fullstar =
    "https://firebasestorage.googleapis.com/v0/b/aime2-322411.appspot.com/o/star_full.svg?alt=media&token=0347de6c-7f17-4a68-b835-b8b66b7c0a35";
let emptystar =
    "https://firebasestorage.googleapis.com/v0/b/aime2-322411.appspot.com/o/star_empty.svg?alt=media&token=28d9c94a-0169-4d6a-88df-e75d3fb35fba";

interface ratingProps {
    title: String;
    setReviews: any;
    rating: number;
}

const Ratings = (props: ratingProps) => {
    const {setReviews, rating} = props;

    return (
        <Stack alignItems={"center"} spacing={"11px"}>
            <Text
                color="#C2C6D6"
                fontSize="16px"
                fontFamily={"MaisonMedium"}
                fontStyle="normal"
                fontWeight="400"
                lineHeight="22.4px"
                textAlign={"center"}
                letterSpacing="0.04px"
            >
                {props.title}
            </Text>
            <Rating
                emptySymbol={<Image src={emptystar} className="icon"/>}
                fullSymbol={<Image src={fullstar} className="icon"/>}
                onClick={(i) => setReviews(i)}
                initialRating={rating}
            />
        </Stack>
    );
};

const BabuActivityReview = (props: any) => {
    const {onNextFunction} = props;

    const [note, setNote] = useState();
    const reviewStarEmpty =
        "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/reviewStar.svg?alt=media&token=1878da4e-f096-482c-8a85-ab7c22b2b9d7";

    const [reviews, setReviews] = useState(0);
    const [reviews2, setReviews2] = useState(0);
    const [reviews3, setReviews3] = useState(0);
    const [reviews4, setReviews4] = useState(0);

    function onNext() {
        onNextFunction();
    }

    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
                    w="100%"
                    h="90vh"
                    position="absolute"
                    bottom="0px"
                    align="center"
                    spacing={"46px"}
                    p={"25px"}
                >
                    <HStack justifyContent="center" spacing={"28px"} w="100%">
                        <Text
                            color="white"
                            fontSize="19px"
                            fontFamily={"ABC"}
                            fontStyle="normal"
                            fontWeight="700"
                            lineHeight="24.7px"
                            textAlign={"center"}
                            letterSpacing="0.04px"
                        >
                            What did you think of the activity?
                        </Text>
                    </HStack>

                    <Stack w="100%" alignItems={"center"} spacing={"36px"}>
                        <Ratings
                            title="Did you find it engaging/Fun?"
                            setReviews={setReviews}
                            rating={reviews}
                        />
                        <Ratings
                            title="Was it simple to follow?"
                            setReviews={setReviews2}
                            rating={reviews2}
                        />
                        <Ratings
                            title="Would you do this activity with your child?"
                            setReviews={setReviews3}
                            rating={reviews3}
                        />
                        <Ratings
                            title="Would you recommend it to a friend?"
                            setReviews={setReviews4}
                            rating={reviews4}
                        />

                        <Stack w="100%" alignItems={"left"} h="69px">
                            <Text
                                color="#929CB5"
                                fontSize="12px"
                                fontFamily={"ABCMedium"}
                                fontStyle="normal"
                                fontWeight="400"
                                lineHeight="15px"
                                textAlign={"left"}
                                letterSpacing="0.04px"
                                display={!note ? "none" : "flex"}
                            >
                                Notes / Comments
                            </Text>
                            <Input
                                px="0px"
                                pb="32px"
                                pt="14px"
                                name="notes"
                                border="none"
                                color="white"
                                fontSize="16px"
                                fontFamily={"MaisonBook"}
                                fontStyle="normal"
                                fontWeight="400"
                                lineHeight="24px"
                                textAlign={"left"}
                                letterSpacing="0.04px"
                                placeholder="Notes / Comments"
                                onChange={(e: any) => {
                                    setNote(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
                            onClick={onNext}
                            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={!note ? true : false}
                            bg="#43C6A1"
                            color="white"
                            padding="17px, 19px, 19px, 19px "
                            w="327px"
                            position={"absolute"}
                            alignSelf={"center"}
                            bottom="40px"
                            borderRadius={"12px"}
                            _hover={
                                !note
                                    ? {
                                        backgroundColor: "rgba(18, 18, 18, 0.3)",
                                        color: "rgba(255, 255, 255, 1)",
                                    }
                                    : {backgroundColor: "#43C6A1", color: "white"}
                            }
                        >
                            Next
                        </Button>
                    </Stack>
                </Stack>
            </Stack>
        </Box>
    );
};

export default BabuActivityReview;

//new code
// import React, { useState } from "react";
// import './auth.css'
// import {
//     Stack,
//     HStack,
//     Textarea,
//     Button,
//     Box,
//     Text,
//     Center,
//     Flex,
//     Select,
//     Image,
//     Input,
//     InputGroup,
//     InputRightElement,
//     InputLeftElement,
// } from "@chakra-ui/react";
//
// interface ratingProps{
//     title:String,
// }
//
// const BabuActivityReview = () => {
//     const [note, setNote] = useState();
//     const reviewStarEmpty =
//         "https://firebasestorage.googleapis.com/v0/b/imagestorage-7b2d2.appspot.com/o/reviewStar.svg?alt=media&token=1878da4e-f096-482c-8a85-ab7c22b2b9d7";
//     const Rating=(props:ratingProps)=>{
//         return(
//             <Stack alignItems={"center"} spacing={"11px"}>
//                 <Text
//                     color="#C2C6D6"
//                     fontSize="16px"
//                     fontFamily={"MaisonMedium"}
//                     fontStyle="normal"
//                     fontWeight="400"
//                     lineHeight="22.4px"
//                     textAlign={"center"}
//                     letterSpacing="0.04px"
//                 >
//                     {props.title}
//                 </Text>
//                 <HStack spacing={"15.3px"}>
//                     <Image
//                         w="36.67px"
//                         h="34.87px"
//                         opacity={0.4}
//                         src={reviewStarEmpty}
//                     />
//                     <Image
//                         w="36.67px"
//                         h="34.87px"
//                         opacity={0.4}
//                         src={reviewStarEmpty}
//                     />
//                     <Image
//                         w="36.67px"
//                         h="34.87px"
//                         opacity={0.4}
//                         src={reviewStarEmpty}
//                     />
//                     <Image
//                         w="36.67px"
//                         h="34.87px"
//                         opacity={0.4}
//                         src={reviewStarEmpty}
//                     />
//                     <Image
//                         w="36.67px"
//                         h="34.87px"
//                         opacity={0.4}
//                         src={reviewStarEmpty}
//                     />
//                 </HStack>
//             </Stack>
//         )
//     }
//
//     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
//                     w="100%"
//                     h="90vh"
//                     position="absolute"
//                     bottom="0px"
//                     align="center"
//                     spacing={"46px"}
//                     p={"25px"}
//                 >
//                     <HStack justifyContent="center" spacing={"28px"} w="100%">
//                         <Text
//                             color="white"
//                             fontSize="19px"
//                             fontFamily={"ABC"}
//                             fontStyle="normal"
//                             fontWeight="700"
//                             lineHeight="24.7px"
//                             textAlign={"center"}
//                             letterSpacing="0.04px"
//                         >
//                             What did you think of the activity?
//                         </Text>
//                     </HStack>
//
//                     <Stack w="100%" alignItems={"center"} spacing={"36px"}>
//                         <Rating title="Did you find it engaging/Fun?" />
//                         <Rating title="Was it simple to follow?" />
//                         <Rating title="Would you do this activity with your child?" />
//                         <Rating title="Would you recommend it to a friend?" />
//
//                         <Stack w="100%" alignItems={"left"} h="69px">
//                             <Text
//                                 color="#929CB5"
//                                 fontSize="12px"
//                                 fontFamily={"ABCMedium"}
//                                 fontStyle="normal"
//                                 fontWeight="400"
//                                 lineHeight="15px"
//                                 textAlign={"left"}
//                                 letterSpacing="0.04px"
//                                 display={!note ? "none" : "flex"}
//                             >
//                                 Notes / Comments
//                             </Text>
//                             <Input
//                                 px="0px"
//                                 pb="32px"
//                                 pt="14px"
//                                 name="notes"
//                                 border="none"
//                                 color="white"
//                                 fontSize="16px"
//                                 fontFamily={"MaisonBook"}
//                                 fontStyle="normal"
//                                 fontWeight="400"
//                                 lineHeight="24px"
//                                 textAlign={"left"}
//                                 letterSpacing="0.04px"
//                                 placeholder="Notes / Comments"
//                                 onChange={(e: any) => {
//                                     setNote(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={!note ? true : false}
//                             bg="#43C6A1"
//                             color="white"
//                             padding="17px, 19px, 19px, 19px "
//                             w="327px"
//                             position={"absolute"}
//                             alignSelf={"center"}
//                             bottom="40px"
//                             borderRadius={"12px"}
//                             _hover={
//                                 !note
//                                     ? { backgroundColor: "rgba(18, 18, 18, 0.3)",color:"rgba(255, 255, 255, 1)" }
//                                     : { backgroundColor: "#43C6A1",color:"white" }
//                             }
//                         >
//                             Next
//                         </Button>
//                     </Stack>
//                 </Stack>
//             </Stack>
//         </Box>
//     );
// };
//
// export default BabuActivityReview;