import React from "react";
import {Button, Image, Input, Select, Stack, Text, Textarea,} from "@chakra-ui/react";
import {Chart} from "react-google-charts";

let startbtn = `https://firebasestorage.googleapis.com/v0/b/aime2-322411.appspot.com/o/start_btn_icon.svg?alt=media&token=6dd16f89-38d2-45c1-b590-d7ac8afe0e04`

interface inputProps {
    title: string;
    OnChange: any;
    value?: any;
}

interface inputProps {
    title: string;
    OnChange: any;
    value?: any;
}

interface selectProps {
    title: string;
    OnChange: any;
    children?: any;
}

interface pieChartProps {
    title: string;
    data: any;
}

interface activityCardProps {
    activity: string;
    activityDetails: string;
    OnClick: any;
    activityImage: string;
}


export const CustomInputDate = (props: inputProps) => {
    return (
        <>
            <Stack w="100%" spacing={"12px"}>
                <Text
                    fontFamily="MaisonBook"
                    color="#9FA2B4"
                    fontSize="12px"
                    fontStyle="normal"
                    fontWeight="400"
                    lineHeight="16px"
                    letterSpacing="0.20000001192092896px"
                    textAlign="left"
                >
                    {props.title}
                </Text>
                <Input
                    type={"date"}
                    value={props.value}
                    onChange={props.OnChange}
                    fontFamily="MaisonBold"
                    color="#051E61"
                    fontSize="14px"
                    fontStyle="normal"
                    fontWeight="700"
                    lineHeight="14px"
                    letterSpacing="0.50000001192092896px"
                    bg="white"
                    h="48px"
                    borderRadius="8px"
                    border="1px solid #DFE0EB"
                />
            </Stack>
        </>
    );
};


export const CustomTextBox = (props: inputProps) => {
    return (
        <>
            <Stack w="100%" spacing={"12px"}>
                <Text
                    fontFamily="MaisonDemi"
                    color="black"
                    fontSize="14px"
                    fontStyle="normal"
                    fontWeight="600"
                    lineHeight="16px"
                    letterSpacing="0.20000001192092896px"
                    textAlign="left"
                >
                    {props.title}
                </Text>
                <Textarea
                    p="24px"
                    h="282px"
                    fontFamily="MaisonBook"
                    color="rgba(37, 39, 51, 0.4)"
                    fontSize="14px"
                    fontStyle="normal"
                    fontWeight="400"
                    lineHeight="20px"
                    letterSpacing="0.50000001192092896px"
                    bg="white"
                    borderRadius="8px"
                    border="1px solid #DFE0EB"
                >
                    Gastropub chillwave lumbersexual umami lyft. Poke austin direct trade,
                    marfa raclette letterpress actually. Chartreuse sriracha pinterest
                    twee lo-fi try-hard. Meditation banh mi kitsch, prism organic hot
                    chicken literally heirloom occupy af semiotics food truck. Aesthetic
                    asymmetrical gluten-free, health goth shaman meh lumbersexual bespoke
                    kinfolk helvetica vaporware fashion axe freegan. Pour-over hammock
                    succulents disrupt chartreuse raw denim. Brunch aesthetic fanny pack
                    subway tile everyday carry green juice neutra beard cray small batch
                    poke yuccie plaid pork belly. Blue bottle 8-bit flexitarian hashtag.
                    Scenester marfa yuccie snackwave edison bulb. VHS blog pickled
                    scenester venmo hashtag lo-fi.
                </Textarea>
            </Stack>
        </>
    );
};

export const CustomInput = (props: inputProps) => {
    return (
        <>
            <Stack w="100%" spacing={"12px"}>
                <Text
                    fontFamily="MaisonBook"
                    color="#9FA2B4"
                    fontSize="12px"
                    fontStyle="normal"
                    fontWeight="400"
                    lineHeight="16px"
                    letterSpacing="0.20000001192092896px"
                    textAlign="left"
                >
                    {props.title}
                </Text>
                <Input
                    value={props.value}
                    onChange={props.OnChange}
                    fontFamily="MaisonBold"
                    color="#051E61"
                    fontSize="14px"
                    fontStyle="normal"
                    fontWeight="700"
                    lineHeight="14px"
                    letterSpacing="0.50000001192092896px"
                    bg="white"
                    h="48px"
                    borderRadius="8px"
                    border="1px solid #DFE0EB"
                />
            </Stack>
        </>
    );
};

export const CustomSelect = (props: selectProps) => {
    return (
        <>
            <Stack w="100%" spacing={"12px"}>
                <Text
                    fontFamily="MaisonBook"
                    color="#9FA2B4"
                    fontSize="12px"
                    fontStyle="normal"
                    fontWeight="400"
                    lineHeight="16px"
                    letterSpacing="0.20000001192092896px"
                    textAlign="left"
                >
                    {props.title}
                </Text>
                <Select
                    iconColor="black"
                    onChange={props.OnChange}
                    fontFamily="MaisonBold"
                    color="#051E61"
                    fontSize="14px"
                    fontStyle="normal"
                    fontWeight="700"
                    lineHeight="14px"
                    letterSpacing="0.50000001192092896px"
                    bg="white"
                    h="48px"
                    borderRadius="8px"
                    border="1px solid #DFE0EB"
                >
                    {props.children}
                </Select>
            </Stack>
        </>
    );
};


export const CustomPieChart = (props: pieChartProps) => {
    return (
        <>
            <Stack width="210px" alignItems={"center"} spacing={"0px"}>
                <Text
                    color="#363740"
                    fontFamily="MaisonBook"
                    fontSize="16px"
                    fontStyle="normal"
                    fontWeight="400"
                    lineHeight="26px"
                    textAlign={"center"}
                    letterSpacing="0.20000001192092896px"
                >
                    {props.title}
                </Text>
                <Chart
                    chartType="PieChart"
                    loader={<div>Loading Chart</div>}
                    data={props.data}
                    options={{
                        legend: "none",
                        pieSliceText: "none",
                        backgroundColor: "transparent",
                        height: 210,
                        width: 210,
                    }}
                    rootProps={{"data-testid": "1"}}
                />
            </Stack>
        </>
    );
};

export const BabuActivityCard = ({
                                     activity,
                                     activityDetails,
                                     OnClick,
                                     activityImage,
                                 }: activityCardProps) => {
    return (
        <>
            <Stack
                shadow="lg"
                borderRadius="24px"
                alignItems={"center"}
                minH="410px"
                maxH="410px"
                w="327px"
                px="32px"
                py="32px"
                textAlign="left"
                className="banner"
                style={{
                    backgroundImage: "url(" + activityImage + ")",
                    WebkitBackgroundSize: "cover",
                    backgroundRepeat: "no-repeat",
                    backgroundPosition: "center",
                    position: "relative",
                }}
            >
                <Stack
                    maxW={"263px"}
                    zIndex={1}
                    spacing={"24px"}
                    style={{
                        textAlign: "center",
                        position: "absolute",
                        bottom: "32px",
                    }}
                >
                    <Stack w="100%" spacing={"8px"}>
                        <Text
                            color="#F2F4F7"
                            fontFamily="MaisonBold"
                            fontSize="16px"
                            fontStyle="normal"
                            fontWeight="700"
                            lineHeight="16px"
                            textAlign={"left"}
                            letterSpacing="0.05px"
                        >
                            {activity}
                        </Text>
                        <Text
                            color="#FFBD18"
                            fontSize="24px"
                            fontFamily={"ABC"}
                            fontStyle="normal"
                            fontWeight="700"
                            lineHeight="26.4px"
                            textAlign={"left"}
                            letterSpacing="0.3px"
                        >
                            {activityDetails}
                        </Text>
                    </Stack>
                    <Button
                        height="42px"
                        width="263px"
                        fontFamily={"ABCMedium"}
                        borderRadius="12px"
                        alignSelf={"center"}
                        padding="14px, 0px, 14px, 0px"
                        bg="#49C5A2"
                        color="white"
                        fontSize="18px"
                        fontStyle="normal"
                        fontWeight="400"
                        lineHeight="16px"
                        letterSpacing="0.05px"
                        onClick={OnClick}
                        _hover={{bg: "#49C5A2"}}
                    >
                        <Image src={startbtn} mr={"13.5px"} w="10.5px" h="13.5px"/>
                        Start
                    </Button>
                </Stack>
            </Stack>
        </>
    );
};