import { updateQuiz } from "@/stores/quizes/actions";
import { useCurrentQuiz } from "@/stores/quizes/hooks";
import { Switch, Button, Modal, Typography, useTheme, Box } from "@mui/material"
import { useState } from "react";
import CustomizedSwitch from "@ui_kit/CustomSwitch";
import { useUserStore } from "@/stores/user";



export const SwitchAI = () => {
    const theme = useTheme();

    const [open, setOpen] = useState(false);
    const quiz = useCurrentQuiz();
    const account = useUserStore()
    if (account.userId === "6755b1ddd5802e9f13663f56") {
        return (
            <>
                <Box sx={{ display: "flex", gap: "20px", alignItems: "center", mt: "20px" }}>
                    <CustomizedSwitch
                        checked={quiz?.status === "ai"}
                        onChange={(e) => {
                            if (e.target.checked) {
                                setOpen(true);
                            } else {
                                updateQuiz(quiz?.id, (quiz) => {
                                    quiz.status = "start"
                                });
                            }
                        }}
                    />
                    <Typography
                        sx={{
                            fontWeight: 500,
                            color: theme.palette.grey3.main,
                        }}
                    >
                        ИИ опрос
                    </Typography>
                </Box>
                <Modal
                    open={open}
                    onClose={() => setOpen(false)}
                    aria-labelledby="modal-modal-title"
                    aria-describedby="modal-modal-description"
                >
                    <Box
                        sx={{
                            position: "absolute" as "absolute",
                            top: "50%",
                            left: "50%",
                            transform: "translate(-50%, -50%)",
                            maxWidth: "620px",
                            width: "100%",
                            bgcolor: "background.paper",
                            borderRadius: "12px",

                            boxShadow: 24,
                            p: 0,
                        }}
                    >
                        <Box
                            sx={{
                                display: "flex",
                                flexDirection: "column",
                                padding: "20px",
                                borderRadius: "12px 12px 0 0",
                                background: theme.palette.background.default,
                            }}
                        >
                            <Typography sx={{ p: "20px" }}>
                                Учтите, что в случае ИИ-опроса сперва будут заданы все созданные вопросы, и только потом — вопросы, сгенерированные ИИ.
                            </Typography>
                            <Button
                                variant="contained"
                                onClick={() => {

                                    updateQuiz(quiz?.id, (state) => {
                                        state.status = "ai";
                                    });
                                    setOpen(false);
                                }}
                            >Согласиться</Button>
                        </Box>
                    </Box>
                </Modal>
            </>

        )
    } else return <></>
}