import * as React from "react";
import HeaderFull from "@ui_kit/Header/HeaderFull";
import SectionWrapper from "@ui_kit/SectionWrapper";
import {Box, Button, IconButton, Paper, Typography, useMediaQuery, useTheme} from "@mui/material";
import {DatePicker} from "@mui/x-date-pickers";
import moment from 'moment';
import CalendarIcon from "@icons/CalendarIcon";
import {LineChart} from "@mui/x-charts";

export default function Analytics () {
    const theme = useTheme();
    const isTablet = useMediaQuery(theme.breakpoints.down(1000));
    const isMobile = useMediaQuery(theme.breakpoints.down(600));

    const [isOpen, setOpen] = React.useState(false)
    const handleClose = () => {
        setOpen(false)
    }
    const handleOpen = () => {
        setOpen(true)

    }
    const onAdornmentClick = () => {
        setOpen(old => !old)
        if (isOpenEnd === true) {
            handleCloseEnd()
        }
    }

    const [isOpenEnd, setOpenEnd] = React.useState(false)
    const handleCloseEnd = () => {
        setOpenEnd(false)
    }
    const handleOpenEnd = () => {
        setOpenEnd(true)
    }
    const onAdornmentClickEnd = () => {
        setOpenEnd(old => !old)
        if (isOpen === true) {
            handleClose()
        }
    }

    const now = moment()
    return(
        <>
            <HeaderFull isRequest={true}/>
            <SectionWrapper component={"section"} sx={{paddingTop: "60px"}}>
                <Typography variant={"h4"}>Аналитика</Typography>
                <Box
                    sx={{
                        display: "flex",
                        gap: isMobile ? "15px" : "20px",
                        alignItems: "end",
                        justifyContent: "space-between",
                        padding: "40px 0 20px",
                        borderBottom: `1px solid ${theme.palette.grey2.main}`,
                    }}>
                    <Box sx={{display: "flex", gap: isMobile ? "15px" : "20px" }}>
                        <Box>
                            <Typography sx={{fontSize: "16px", marginBottom: "5px", fontWeight: 500, color: "4D4D4D" }}>
                                Дата начала
                            </Typography>
                            <DatePicker
                                open={isOpen}
                                onClose={handleClose}
                                onOpen={handleOpen}
                                // defaultValue={now}
                                sx={{
                                    width: isMobile ? "146px" : "169px",

                                    '& .MuiOutlinedInput-root': {
                                        borderRadius: "10px",
                                        fontSize: "16px"
                                    },
                                    '& .MuiInputBase-input': {
                                        padding: "12.5px 14px"
                                    }
                                }}
                                slotProps={{
                                    textField:
                                        { InputProps: { endAdornment: <IconButton onClick={onAdornmentClick}>
                                                    <CalendarIcon/>
                                                </IconButton>  } }
                                }}
                            />
                        </Box>
                        <Box>
                            <Typography  sx={{fontSize: "16px", marginBottom: "5px", fontWeight: 500, color: "4D4D4D"}}>Дата окончания</Typography>
                            <DatePicker
                                open={isOpenEnd}
                                onClose={handleCloseEnd}
                                onOpen={handleOpenEnd}
                                // defaultValue={now}
                                sx={{
                                    width: isMobile ? "146px" : "169px",
                                    '& .MuiOutlinedInput-root': {
                                        borderRadius: "10px",
                                        fontSize: "16px"
                                    },
                                    '& .MuiInputBase-input': {
                                        padding: "12.5px 14px"
                                    }
                                }}
                                slotProps={{
                                    textField:
                                        { InputProps: { endAdornment: <IconButton onClick={onAdornmentClickEnd}>
                                                    <CalendarIcon/>
                                                </IconButton>  } }
                                }}
                            />
                        </Box>
                    </Box>

                    <Button
                        variant="outlined"
                        sx={{
                            minWidth: isMobile ? "144px" : "180px",
                            px: isMobile ? "31px" : "43px",
                            color: theme.palette.brightPurple.main,
                            "&:hover": {
                                backgroundColor: "#581CA7",
                                color: "#FFFFFF"
                            },
                            "&:active": {
                                backgroundColor: "#000000",
                                color: "#FFFFFF"
                            },
                        }}
                    >Сбросить</Button>
                </Box>
                <Box>
                    <Paper>
                        <Typography>Открыли quiz</Typography>
                        <LineChart
                            xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
                            series={[
                                {
                                    data: [2, 5.5, 2, 8.5, 1.5, 5],
                                },
                            ]}
                            width={500}
                            height={300}
                        />
                    </Paper>

                </Box>
            </SectionWrapper>
        </>
    )
}