import {Box, Link, Typography, useMediaQuery, useTheme} from "@mui/material";
import React, {useState} from "react";
import CustomTextField from "@ui_kit/CustomTextField";
import {quizStore} from "@root/quizes";
import {useParams} from "react-router-dom";



export default function Extra () {
    const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
    const params = Number(useParams().quizId);
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));
    const upSm = useMediaQuery(theme.breakpoints.up("sm"));
    const [isExpanded, setIsExpanded] = useState(false);

    const expandedHC = (bool:boolean) => {
        setIsExpanded(bool)
    }
    const mutationOrgMetaHC = (e: any) => {
        let SPageClone = listQuizes[params].config
        SPageClone.meta = e.target.value
        updateQuizesList(params, {config: SPageClone })
    }
    return (
        <Box
            sx={{
                width: "100%",
                paddingBottom: "15px",
                overflow: "hidden",
                boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
                            0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525), 
                            0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
                            0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
                            0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 
                            0px 2.76726px 8.55082px rgba(210, 208, 225, 0.067
                              4749)`,
            }}
        >
            <Box
                sx={{
                    width: "100%",
                    backgroundColor: "transparent",
                }}
            >
                <Box
                    onClick={() => expandedHC(!isExpanded)}
                    sx={{
                        paddingTop: "15px",
                        paddingRight: "20px",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                        cursor: "pointer",
                        userSelect: "none",
                    }}
                >
                    <Link sx={{
                        mt: "20px",
                        fontSize: "16px",
                        lineHeight: "19px",
                        color: theme.palette.brightPurple.main,
                        textDecorationColor: theme.palette.brightPurple.main
                    }}>Дополнительно</Link>

                </Box>
                {isExpanded && (
                    <Box
                        sx={{
                            backgroundColor: "transparent",
                            gap: "15px",
                            paddingTop: "15px",
                        }}
                    >
                        <Typography sx={{ fontWeight: 500, color: theme.palette.grey3.main, mt: "20px", mb: "14px" }}>Mета заголовок</Typography>
                        <CustomTextField placeholder="Текст-заполнитель — это текст, который " text={listQuizes[params].config.meta} onChange={mutationOrgMetaHC} />
                        <Typography sx={{
                            mt: "20px",
                            fontSize: "16px",
                            lineHeight: "19px",
                            maxWidth: "80%",
                            color: theme.palette.grey3.main,
                        }}>
                            Текст-заполнитель —
                            это текст, который имеет Текст-заполнитель —
                            это текст, который имеет Текст-заполнитель —
                            это текст, который имеет Текст-заполнитель —
                            это текст, который имеет Текст-заполнитель
                        </Typography>

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