frontPanel/src/pages/Questions/ButtonsOptions.tsx

import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
import { DoubleTick } from "@icons/questionsPage/DoubleTick";
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import type { SxProps } from "@mui/material";
import {
    Box, Button,
    IconButton, Modal,
    Tooltip,
    Typography,
    useMediaQuery,
    useTheme,
} from "@mui/material";
import { copyQuestion, deleteQuestion, deleteQuestionWithTimeout, clearRuleForAll, updateQuestion, getQuestionByContentId } from "@root/questions/actions";
import { updateOpenBranchingPanel, updateDesireToOpenABranchingModal, } from "@root/uiTools/actions";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
import Branching from "../../assets/icons/questionsPage/branching";
import Clue from "../../assets/icons/questionsPage/clue";
import { HideIcon } from "../../assets/icons/questionsPage/hideIcon";
import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { enqueueSnackbar } from "notistack";
import { useQuestionsStore } from "@root/questions/store";
import { updateOpenedModalSettingsId } from "@root/uiTools/actions";
import { updateRootContentId } from "@root/quizes/actions";
import { useUiTools } from "@root/uiTools/store";
import {useState} from "react";

interface Props {
    switchState: string;
    SSHC: (data: string) => void;
    question: AnyTypedQuizQuestion;
    sx?: SxProps;
}

export default function ButtonsOptions({
    SSHC,
    switchState,
    question,
}: Props) {
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(790));
    const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920));
    const quiz = useCurrentQuiz();
    const { questions } = useQuestionsStore.getState();
    const [openDelete, setOpenDelete] = useState<boolean>(false);

    const openedModal = () => {
        updateOpenBranchingPanel(true);
        updateDesireToOpenABranchingModal(question.content.id);
    };

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

                //записываем потомков , а их результаты удаляем
                const getChildren = (parentQuestion: AnyTypedQuizQuestion) => {
                    questions.forEach((targetQuestion) => {
                        if (targetQuestion.type !== null && targetQuestion.content.rule.parentId === parentQuestion.content.id) {//если у вопроса совпал родитель с родителем => он потомок, в кучу его
                            if (targetQuestion.type !== "result" && targetQuestion.type !== null) {
                                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);

            const result = questions.find(q => q.type === "result" && q.content.rule.parentId === question.content.id)
            if (result) deleteQuestion(result.id);

        } else {
            deleteQuestion(question.id);
        }
    };


    const buttonSetting: {
        icon: JSX.Element;
        title: string;
        value: string;
        myFunc?: any;
    }[] = [
            {
                icon: (
                    <SettingIcon
                        color={
                            switchState === "setting" ? "#ffffff" : theme.palette.grey3.main
                        }
                    />
                ),
                title: "Настройки",
                value: "setting",
            },
            // {
            //     icon: (
            //         <Clue
            //             color={switchState === "help" ? "#ffffff" : theme.palette.grey3.main}
            //         />
            //     ),
            //     title: "Подсказка",
            //     value: "help",
            // },
            {
                icon: (
                    <Branching
                        color={
                            switchState === "branching" ? "#ffffff" : theme.palette.grey3.main
                        }
                    />
                ),
                title: "Ветвление",
                value: "branching",
                myFunc: (question) => {
                    updateOpenBranchingPanel(true);
                    updateDesireToOpenABranchingModal(question.content.id);
                }
            },
        ];

    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",
                }}
            >
                {buttonSetting.map(({ icon, title, value, myFunc }) => (
                    <Box key={value}>
                        {value === "branching" ? (
                            <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
                                    key={title}
                                    onClick={() => {
                                        openedModal();
                                        // SSHC(value);
                                        // myFunc(question);
                                    }}
                                    sx={{
                                        display: quiz.config.type === "form" ? "none" : "flex",
                                        backgroundColor:
                                            switchState === value
                                                ? theme.palette.brightPurple.main
                                                : "transparent",
                                        color:
                                            switchState === value
                                                ? "#ffffff"
                                                : theme.palette.grey3.main,
                                        minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
                                        height: "30px",
                                        "&:hover": {
                                            color: theme.palette.grey3.main,
                                            "& path": { stroke: theme.palette.grey3.main },
                                        },
                                    }}
                                >
                                    {icon}
                                    {isWrappMiniButtonSetting ? null : title}
                                </MiniButtonSetting>
                            </Tooltip>
                        ) : (
                            <>
                                <MiniButtonSetting
                                    key={title}
                                    onClick={() => {
                                        SSHC(value);
                                        myFunc();
                                    }}
                                    sx={{
                                        backgroundColor:
                                            switchState === value
                                                ? theme.palette.brightPurple.main
                                                : "transparent",
                                        color:
                                            switchState === value
                                                ? "#ffffff"
                                                : theme.palette.grey3.main,
                                        minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
                                        height: "30px",
                                        "&:hover": {
                                            color: theme.palette.grey3.main,
                                            "& path": { stroke: theme.palette.grey3.main },
                                        },
                                    }}
                                >
                                    {icon}
                                    {isWrappMiniButtonSetting ? null : title}
                                </MiniButtonSetting>
                            </>
                        )}
                    </Box>
                ))}
                <>
                    <MiniButtonSetting
                        onClick={undefined} // TODO
                        sx={{
                            minWidth: "30px",
                            height: "30px",
                            backgroundColor: "#FEDFD0",
                        }}
                    >
                        <DoubleTick style={{ color: "#FC712F", fontSize: "9px" }} />
                    </MiniButtonSetting>
                    <MiniButtonSetting
                        onClick={undefined} // TODO
                        sx={{
                            minWidth: "30px",
                            height: "30px",
                            backgroundColor: "#FEDFD0",
                        }}
                    >
                        <DoubleArrowRight style={{ color: "#FC712F", fontSize: "9px" }} />
                    </MiniButtonSetting>
                    <MiniButtonSetting
                        onClick={undefined} // TODO
                        sx={{
                            minWidth: "30px",
                            height: "30px",
                            backgroundColor: "#FEDFD0",
                        }}
                    >
                        <VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} />
                    </MiniButtonSetting>
                </>
            </Box>
            <Box
                sx={{
                    padding: "20px",
                    display: "flex",
                    gap: "6px",
                }}
            >
                <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
                    <HideIcon style={{ color: "#4D4D4D" }} />
                </IconButton>
                <IconButton
                    sx={{ borderRadius: "6px", padding: "2px" }}
                    onClick={() => copyQuestion(question.id, question.quizId)}
                >
                    <CopyIcon color={"#4D4D4D"} />
                </IconButton>
                <IconButton
                    sx={{ borderRadius: "6px", padding: "2px" }}
                    onClick={() => {
                        if(question.content.rule.parentId.length !== 0) {
                            setOpenDelete(true)
                        } else {
                            deleteQuestionWithTimeout(question.id, deleteFn);
                        }

                    }}
                    data-cy="delete-question"
                >
                    <DeleteIcon color={"#4D4D4D"} />
                </IconButton>
                <Modal open={openDelete} onClose={() => setOpenDelete(false)}>
                    <Box
                        sx={{
                            position: "absolute",
                            top: "50%",
                            left: "50%",
                            transform: "translate(-50%, -50%)",
                            padding: "30px",
                            borderRadius: "10px",
                            background: "#FFFFFF",
                        }}
                    >
                        <Typography variant="h6" sx={{textAlign: "center"}}>
                            Вы удаляете вопрос, участвующий в ветвлении. Все его потомки потеряют данные ветвления. Вы уверены, что хотите удалить вопрос?
                        </Typography>
                        <Box
                            sx={{
                                marginTop: "30px",
                                display: "flex",
                                justifyContent: "center",
                                gap: "15px",
                            }}
                        >
                            <Button
                                variant="contained"
                                sx={{ minWidth: "150px" }}
                                onClick={() => setOpenDelete(false)}
                            >
                                Отмена
                            </Button>
                            <Button
                                variant="contained"
                                sx={{ minWidth: "150px" }}
                                onClick={() => {
                                    deleteQuestionWithTimeout(question.id, deleteFn);
                                }}
                            >
                                Подтвердить
                            </Button>
                        </Box>
                    </Box>
                </Modal>
            </Box>
        </Box>
    );
}