frontPanel/src/pages/Questions/DraggableList/ChooseAnswerModal.tsx

import {
    Box,
    Button,
    ClickAwayListener,
    Grow,
    MenuItem,
    MenuList,
    Modal,
    Paper,
    Popper,
    Typography,
    useTheme,
} from "@mui/material";
import { useState } from "react";
import { BUTTON_TYPE_QUESTIONS } from "../TypeQuestions";
import type { RefObject } from "react";
import type { AnyQuizQuestion } from "../../../model/questionTypes/shared";
import { QuestionType } from "@model/question/question";


type ChooseAnswerModalProps = {
    open: boolean;
    onClose: () => void;
    anchorRef: RefObject<HTMLDivElement>;
    question: AnyQuizQuestion;
    switchState: string;
};

export const ChooseAnswerModal = ({
    open,
    onClose,
    anchorRef,
    question,
    switchState,
}: ChooseAnswerModalProps) => {
    const [openModal, setOpenModal] = useState<boolean>(false);
    const [selectedValue, setSelectedValue] = useState<QuestionType>("text");
    const theme = useTheme();

    return (
        <>
            <Popper
                placement="right-start"
                open={open}
                anchorEl={anchorRef.current}
                transition
            >
                {({ TransitionProps }) => (
                    <Grow {...TransitionProps}>
                        <Paper>
                            <ClickAwayListener onClickAway={onClose}>
                                <MenuList autoFocusItem={open}>
                                    {BUTTON_TYPE_QUESTIONS.map(({ icon, title, value }) => (
                                        <MenuItem
                                            key={value}
                                            sx={{ display: "flex", gap: "10px" }}
                                            {...(value !== switchState && {
                                                onClick: () => {
                                                    onClose();
                                                    setOpenModal(true);
                                                    setSelectedValue(value);
                                                },
                                            })}
                                        >
                                            <Box>{icon}</Box>
                                            <Typography
                                                sx={{
                                                    color:
                                                        value === switchState
                                                            ? theme.palette.brightPurple.main
                                                            : theme.palette.grey2.main,
                                                }}
                                            >
                                                {title}
                                            </Typography>
                                        </MenuItem>
                                    ))}
                                </MenuList>
                            </ClickAwayListener>
                        </Paper>
                    </Grow>
                )}
            </Popper>
            <Modal open={openModal} onClose={() => setOpenModal(false)}>
                <Box
                    sx={{
                        position: "absolute",
                        top: "50%",
                        left: "50%",
                        transform: "translate(-50%, -50%)",
                        padding: "30px",
                        borderRadius: "10px",
                        background: "#FFFFFF",
                    }}
                >
                    <Typography variant="h6">
                        Все настройки, кроме заголовка вопроса будут сброшены
                    </Typography>
                    <Box
                        sx={{
                            marginTop: "30px",
                            display: "flex",
                            justifyContent: "center",
                            gap: "15px",
                        }}
                    >
                        <Button
                            variant="contained"
                            sx={{ minWidth: "150px" }}
                            onClick={() => setOpenModal(false)}
                        >
                            Отмена
                        </Button>
                        <Button
                            variant="contained"
                            sx={{ minWidth: "150px" }}
                            onClick={() => { // TODO
                                // setOpenModal(false);

                                // const question = { ...listQuestions[quizId][totalIndex] };

                                // removeQuestionForce(quizId, question.id);
                                // createQuestion(quizId, selectedValue, totalIndex);
                                // updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
                                //     title: question.title,
                                //     expanded: question.expanded,
                                // });
                            }}
                        >
                            Подтвердить
                        </Button>
                    </Box>
                </Box>
            </Modal>
        </>
    );
};