import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
import { DoubleTick } from "@icons/questionsPage/DoubleTick";
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
import { QuizQuestionVarImg } from "@model/questionTypes/varimg";
import {
    Box,
    IconButton,
    Tooltip,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import { copyQuestion, deleteQuestion, updateQuestion, clearRuleForAll, getQuestionByContentId } from "@root/questions/actions";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import { ReallyChangingModal } from "@ui_kit/Modal/ReallyChangingModal/ReallyChangingModal";
import { useEffect, useState } from "react";
import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
import Branching from "../../assets/icons/questionsPage/branching";
import Clue from "../../assets/icons/questionsPage/clue";
import { DeleteIcon } from "../../assets/icons/questionsPage/deleteIcon";
import { HideIcon } from "../../assets/icons/questionsPage/hideIcon";
import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
import { QuizQuestionVariant } from "@model/questionTypes/variant";
import { updateOpenedModalSettingsId } from "@root/questions/actions";
import { updateOpenBranchingPanel, updateDesireToOpenABranchingModal } from "@root/questions/actions";
import { useQuestionsStore } from "@root/questions/store";
import { enqueueSnackbar } from "notistack";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { updateRootContentId } from "@root/quizes/actions";


interface Props {
    switchState: string;
    SSHC: (data: string) => void;
    question: QuizQuestionVariant | QuizQuestionVarImg;
}

export default function ButtonsOptionsAndPict({
    SSHC,
    switchState,
    question,
}: Props) {
    const [buttonHover, setButtonHover] = useState<string>("");
    const [openedReallyChangingModal, setOpenedReallyChangingModal] =
        useState<boolean>(false);
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(790));
    const isIconMobile = useMediaQuery(theme.breakpoints.down(1050));
    const { questions } = useQuestionsStore.getState()
    const quiz = useCurrentQuiz();

    useEffect(() => {
        if (question.deleteTimeoutId) {
            clearTimeout(question.deleteTimeoutId);
        }
    }, [question]);

    return (
        <Box
            sx={{
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                width: "100%",
                background: "#f2f3f7",
                height: isMobile ? "92px" : "70px",
            }}
        >
            <Box
                sx={{
                    padding: isMobile ? " 3px 12px 11px" : "20px",
                    display: "flex",
                    flexWrap: isMobile ? "wrap" : "nowrap",
                    gap: "6px",
                }}
            >
                <MiniButtonSetting
                    onMouseEnter={() => setButtonHover("setting")}
                    onMouseLeave={() => setButtonHover("")}
                    onClick={() => {
                        SSHC("setting");
                    }}
                    sx={{
                        maxWidth: "104px",
                        minWidth: isIconMobile ? "30px" : "64px",
                        height: "30px",
                        backgroundColor:
                            switchState === "setting"
                                ? theme.palette.brightPurple.main
                                : "transparent",
                        color:
                            switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
                        "&:hover": {
                            color:
                                switchState === "setting" ? theme.palette.grey3.main : null,
                        },
                    }}
                >
                    <SettingIcon
                        color={
                            buttonHover === "setting"
                                ? theme.palette.grey3.main
                                : switchState === "setting"
                                    ? "#ffffff"
                                    : theme.palette.grey3.main
                        }
                    />
                    {isIconMobile ? null : "Настройки"}
                </MiniButtonSetting>
                <MiniButtonSetting
                    onMouseEnter={() => setButtonHover("help")}
                    onMouseLeave={() => setButtonHover("")}
                    onClick={() => {
                        SSHC("help");
                    }}
                    sx={{
                        minWidth: isIconMobile ? "30px" : "64px",
                        maxWidth: "102px",
                        height: "30px",
                        backgroundColor:
                            switchState === "help"
                                ? theme.palette.brightPurple.main
                                : "transparent",
                        color:
                            switchState === "help" ? "#ffffff" : theme.palette.grey3.main,
                        "&:hover": {
                            color: switchState === "help" ? theme.palette.grey3.main : null,
                        },
                    }}
                >
                    <Clue
                        color={
                            buttonHover === "help"
                                ? theme.palette.grey3.main
                                : switchState === "help"
                                    ? "#ffffff"
                                    : theme.palette.grey3.main
                        }
                    />
                    {isIconMobile ? null : "Подсказка"}
                </MiniButtonSetting>
                <>
                    <Tooltip
                        arrow
                        placement="right"
                        componentsProps={{
                            tooltip: {
                                sx: {
                                    background: "#fff",
                                    borderRadius: "6px",
                                    color: "#9A9AAF",
                                    boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
                                    "& .MuiTooltip-arrow": {
                                        color: "#FFF",
                                    },
                                },
                            },
                        }}
                        title={
                            <Box>
                                <Typography
                                    sx={{
                                        color: "#4D4D4D",
                                        fontWeight: "bold",
                                        fontSize: "14px",
                                        marginBottom: "10px",
                                    }}
                                >
                                    Будет показан при условии
                                </Typography>
                                <Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>
                                    Название
                                </Typography>
                                <Typography
                                    sx={{
                                        fontWeight: "bold",
                                        fontSize: "12px",
                                        marginBottom: "10px",
                                    }}
                                >
                                    Условие 1, Условие 2
                                </Typography>
                                <Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>
                                    Все условия обязательны
                                </Typography>
                            </Box>
                        }
                    >
                        <MiniButtonSetting
                            onMouseEnter={() => setButtonHover("branching")}
                            onMouseLeave={() => setButtonHover("")}
                            onClick={() => {
                                updateOpenBranchingPanel(true)
                                updateDesireToOpenABranchingModal(question.content.id)
                            }}
                            sx={{
                                height: "30px",
                                maxWidth: "103px",
                                minWidth: isIconMobile ? "30px" : "64px",
                                backgroundColor:
                                    switchState === "branching"
                                        ? theme.palette.brightPurple.main
                                        : "transparent",
                                color:
                                    switchState === "branching"
                                        ? "#ffffff"
                                        : theme.palette.grey3.main,
                                "&:hover": {
                                    color:
                                        switchState === "branching"
                                            ? theme.palette.grey3.main
                                            : null,
                                },
                            }}
                        >
                            <Branching
                                color={
                                    buttonHover === "branching"
                                        ? theme.palette.grey3.main
                                        : switchState === "branching"
                                            ? "#ffffff"
                                            : theme.palette.grey3.main
                                }
                            />
                            {isIconMobile ? null : "Ветвление"}
                        </MiniButtonSetting>
                    </Tooltip>
                    <MiniButtonSetting
                        onMouseEnter={() => setButtonHover("image")}
                        onMouseLeave={() => setButtonHover("")}
                        onClick={() => {
                            SSHC("image");
                        }}
                        sx={{
                            height: "30px",
                            maxWidth: "123px",
                            minWidth: isIconMobile ? "30px" : "64px",
                            backgroundColor:
                                switchState === "image"
                                    ? theme.palette.brightPurple.main
                                    : "transparent",
                            color:
                                switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
                            "&:hover": {
                                color:
                                    switchState === "image" ? theme.palette.grey3.main : null,
                            },
                        }}
                    >
                        <ImgIcon
                            color={
                                buttonHover === "image"
                                    ? theme.palette.grey3.main
                                    : switchState === "image"
                                        ? "#ffffff"
                                        : theme.palette.grey3.main
                            }
                        />
                        {isIconMobile ? null : "Изображение"}
                    </MiniButtonSetting>
                    <MiniButtonSetting
                        onClick={() => setOpenedReallyChangingModal(true)}
                        sx={{
                            minWidth: "30px",
                            height: "30px",
                            backgroundColor: "#FEDFD0",
                        }}
                    >
                        <DoubleTick style={{ color: "#FC712F", fontSize: "9px" }} />
                    </MiniButtonSetting>
                    <MiniButtonSetting
                        onClick={() => setOpenedReallyChangingModal(true)}
                        sx={{
                            minWidth: "30px",
                            height: "30px",
                            backgroundColor: "#FEDFD0",
                        }}
                    >
                        <DoubleArrowRight style={{ color: "#FC712F", fontSize: "9px" }} />
                    </MiniButtonSetting>
                    <MiniButtonSetting
                        onClick={() => setOpenedReallyChangingModal(true)}
                        sx={{
                            minWidth: "30px",
                            height: "30px",
                            backgroundColor: "#FEDFD0",
                        }}
                    >
                        <VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} />
                    </MiniButtonSetting>
                </>
            </Box>
            <Box
                sx={{
                    padding: "20px",
                }}
            >
                <IconButton sx={{ borderRadius: "6px", padding: "0px 2px" }}>
                    <HideIcon style={{ color: "#4D4D4D" }} />
                </IconButton>
                <IconButton
                    sx={{ borderRadius: "6px" }}
                    onClick={() => copyQuestion(question.id, question.quizId)}
                >
                    <CopyIcon style={{ color: "#4D4D4D" }} />
                </IconButton>
                <IconButton
                    sx={{ borderRadius: "6px", padding: "2px" }}
                    onClick={() => { // TODO
                        // const removedId = question.id;
                        // if (question.deleteTimeoutId) {
                        //     clearTimeout(question.deleteTimeoutId);
                        // }

                        // removeQuestion(quizId, totalIndex);

                        // const newTimeoutId = window.setTimeout(() => {
                        //     removeQuestionForce(quizId, removedId);
                        // }, 5000);

                        // updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
                        //     ...question,
                        //     deleteTimeoutId: newTimeoutId,
                        // });

                        if (question.type !== null) {
                            if (question.content.rule.parentId === "root") { //удалить из стора root и очистить rule всем вопросам
                                updateRootContentId(quiz.id, "")
                                clearRuleForAll()
                                questions.forEach(q => {
                                    if (q.type === "result") {
                                        deleteQuestion(q.id);
                                    }
                                });
                                deleteQuestion(question.id);
                            } else if (question.content.rule.parentId.length > 0) { //удалить из стора вопрос из дерева и очистить его потомков
                                const clearQuestions = [] as string[]

                                //записываем потомков , а их результаты удаляем
                                const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
                                    questions.forEach((targetQuestion) => {
                                        if (targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его
                                            if (targetQuestion.type === "result") {
                                                deleteQuestion(targetQuestion.id);
                                            } else {
                                                if (!clearQuestions.includes(targetQuestion.content.id)) clearQuestions.push(targetQuestion.content.id)
                                                getChildren(targetQuestion) //и ищем его потомков
                                            }
                                        }
                                    })
                                }
                                getChildren(question)
                                //чистим потомков от инфы ветвления
                                clearQuestions.forEach((id) => {
                                    updateQuestion(id, question => {
                                        question.content.rule.parentId = ""
                                        question.content.rule.main = []
                                        question.content.rule.default = ""
                                    })
                                })

                                //чистим rule родителя
                                const parentQuestion = getQuestionByContentId(question.content.rule.parentId)
                                const newRule = {}
                                newRule.main = parentQuestion.content.rule.main.filter((data) => data.next !== question.content.id) //удаляем условия перехода от родителя к этому вопросу
                                newRule.parentId = parentQuestion.content.rule.parentId
                                newRule.default = parentQuestion.content.rule.parentId === question.content.id ? "" : parentQuestion.content.rule.parentId
                                newRule.children = [...parentQuestion.content.rule.children].splice(parentQuestion.content.rule.children.indexOf(question.content.id), 1);

                                updateQuestion(question.content.rule.parentId, (PQ) => {
                                    PQ.content.rule = newRule
                                })
                                deleteQuestion(question.id)
                            }

                            deleteQuestion(question.id)

                        }
                    }}
                    data-cy="delete-question"
                >
                    <DeleteIcon style={{ color: "#4D4D4D" }} />
                </IconButton>
            </Box>
            <ReallyChangingModal
                opened={openedReallyChangingModal}
                onClose={() => setOpenedReallyChangingModal(false)}
            />
        </Box>
    );
}