frontPanel/src/pages/Questions/branchingQuestions.tsx

import InfoIcon from "@icons/Info";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { QuizQuestionVariant } from "@model/questionTypes/variant";
import {
    Box,
    Button,
    Chip,
    FormControl,
    FormControlLabel,
    IconButton,
    Link,
    Modal,
    Radio,
    RadioGroup,
    Tooltip,
    Typography,
    useTheme,
} from "@mui/material";
import { updateQuestionWithFnOptimistic } from "@root/questions/actions";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import { useEffect, useRef, useState } from "react";
import { Select } from "./Select";


type BranchingQuestionsProps = {
    question: QuizQuestionVariant;
};

const ACTIONS = ["Показать", "Скрыть"];
const STIPULATIONS = ["Условие 1", "Условие 2", "Условие 3"];
const ANSWERS = ["Ответ 1", "Ответ 2", "Ответ 3"];
const CONDITIONS = [
    "Все условия обязательны",
    "Обязательно хотя бы одно условие",
];

export default function BranchingQuestions({
    question,
}: BranchingQuestionsProps) {
    const theme = useTheme();
    const [title, setTitle] = useState<string>("");
    const [titleInputWidth, setTitleInputWidth] = useState<number>(0);
    const titleRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        setTitleInputWidth(titleRef.current?.offsetWidth || 0);
    }, [title]);

    const handleClose = () => {
        updateQuestionWithFnOptimistic(question.id, question => {
            question.openedModalSettings = false;
        });
    };

    return (
        <>
            <Modal open={question.openedModalSettings} onClose={handleClose}>
                <Box
                    sx={{
                        position: "absolute",
                        overflow: "hidden",
                        top: "50%",
                        left: "50%",
                        transform: "translate(-50%, -50%)",
                        maxWidth: "620px",
                        width: "100%",
                        bgcolor: "background.paper",
                        borderRadius: "12px",
                        boxShadow: 24,
                        p: 0,
                    }}
                >
                    <Box
                        sx={{
                            boxSizing: "border-box",
                            background: "#F2F3F7",
                            height: "70px",
                            padding: "0 25px",
                            display: "flex",
                            alignItems: "center",
                        }}
                    >
                        <Box sx={{ color: "#9A9AAF" }}>
                            <Typography component="span">(</Typography>
                            <Box sx={{ display: "inline" }}>
                                <Typography
                                    ref={titleRef}
                                    sx={{
                                        position: "absolute",
                                        opacity: 0,
                                        zIndex: "-100",
                                        whiteSpace: "pre",
                                    }}
                                >
                                    {title}
                                </Typography>
                                <input
                                    type="text"
                                    value={title}
                                    placeholder="Заголовок вопроса"
                                    onChange={({ target }) => setTitle(target.value)}
                                    style={{
                                        width: titleInputWidth ? titleInputWidth : 170,
                                        outline: "none",
                                        background: "transparent",
                                        border: "none",
                                        fontSize: "18px",
                                        minWidth: "50px",
                                        maxWidth: "500px",
                                        fontFamily: "Rubik",
                                        transition: ".2s",
                                    }}
                                />
                            </Box>
                            <Typography component="span">)</Typography>
                        </Box>
                        <Tooltip
                            title="Настройте условия, при которых данный вопрос будет отображаться в квизе."
                            placement="top"
                        >
                            <Box>
                                <InfoIcon />
                            </Box>
                        </Tooltip>
                    </Box>
                    <Box
                        sx={{
                            padding: "20px",
                            display: "flex",
                            flexDirection: "column",
                            gap: "30px",
                        }}
                    >
                        <Box
                            sx={{
                                display: "flex",
                                gap: "20px",
                                alignItems: "center",
                            }}
                        >
                            <Select
                                items={ACTIONS}
                                activeItemIndex={question.content.rule.show ? 0 : 1}
                                sx={{ maxWidth: "140px" }}
                                onChange={(action) => {
                                    updateQuestionWithFnOptimistic(question.id, question => {
                                        question.content.rule.show = action === ACTIONS[0];
                                    });
                                }}
                            />
                            <Typography sx={{ color: theme.palette.grey2.main }}>
                                если в ответе на вопрос
                            </Typography>
                        </Box>
                        {question.content.rule.reqs.map((request, index) => (
                            <Box
                                key={index}
                                sx={{
                                    padding: "20px",
                                    borderRadius: "8px",
                                    height: "100%",
                                    bgcolor: "#F2F3F7",
                                }}
                            >
                                <Box
                                    sx={{
                                        display: "flex",
                                        justifyContent: "space-between",
                                        alignItems: "center",
                                        pb: "5px",
                                    }}
                                >
                                    <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
                                        Условие 1
                                    </Typography>
                                    <IconButton
                                        sx={{ borderRadius: "6px", padding: "2px" }}
                                        onClick={() => {
                                            updateQuestionWithFnOptimistic(question.id, question => {
                                                question.content.rule.reqs.splice(index, 1);
                                            });
                                        }}
                                    >
                                        <DeleteIcon color={"#4D4D4D"} />
                                    </IconButton>
                                </Box>
                                <Select
                                    empty
                                    activeItemIndex={request.id ? Number(request.id) : -1}
                                    items={STIPULATIONS}
                                    onChange={(stipulation) => {
                                        updateQuestionWithFnOptimistic(question.id, question => {
                                            question.content.rule.reqs[index].id = String(
                                                STIPULATIONS.findIndex((item) => item.includes(stipulation))
                                            );
                                        });
                                    }}
                                    sx={{ marginBottom: "15px" }}
                                />
                                {request.id && (
                                    <>
                                        <Box
                                            sx={{
                                                display: "flex",
                                                alignItems: "center",
                                                pb: "10px",
                                            }}
                                        >
                                            <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
                                                Дан ответ
                                            </Typography>
                                            <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
                                                (Укажите один или несколько вариантов)
                                            </Typography>
                                        </Box>
                                        <Select
                                            empty
                                            activeItemIndex={-1}
                                            items={ANSWERS}
                                            onChange={(answer) => {
                                                const answerItemIndex = ANSWERS.findIndex(
                                                    (answerItem) => answerItem === answer
                                                );
                                                updateQuestionWithFnOptimistic(question.id, question => {
                                                    const vars = question.content.rule.reqs[index].vars;
                                                    if (vars.includes(answerItemIndex)) {
                                                        vars.push(answerItemIndex);
                                                    }
                                                });
                                            }}
                                            sx={{
                                                marginBottom: "10px",
                                                ".MuiSelect-select.MuiInputBase-input": {
                                                    color: "transparent",
                                                },
                                            }}
                                        />
                                        <Box
                                            sx={{
                                                display: "flex",
                                                gap: "10px",
                                            }}
                                        >
                                            {question.content.rule.reqs[index].vars.map(
                                                (item, varIndex) => (
                                                    <Chip
                                                        key={varIndex}
                                                        label={ANSWERS[item]}
                                                        variant="outlined"
                                                        onDelete={() => {
                                                            updateQuestionWithFnOptimistic(question.id, question => {
                                                                const vars = question.content.rule.reqs[index].vars;

                                                                const removedItemIndex = vars.findIndex((varItem) => varItem === item);
                                                                if (removedItemIndex === -1) return;

                                                                vars.splice(removedItemIndex, 1);
                                                            });
                                                        }}
                                                    />
                                                )
                                            )}
                                        </Box>
                                    </>
                                )}
                            </Box>
                        ))}
                        <Box
                            sx={{
                                display: "flex",
                                flexDirection: "column",
                                alignItems: "baseline",
                            }}
                        >
                            <Link
                                variant="body2"
                                sx={{
                                    color: theme.palette.brightPurple.main,
                                    marginBottom: "10px",
                                }}
                                onClick={() => {
                                    updateQuestionWithFnOptimistic(question.id, question => {
                                        question.content.rule.reqs.push({ id: "", vars: [] });
                                    });
                                }}
                            >
                                Добавить условие
                            </Link>
                            <FormControl>
                                <RadioGroup
                                    aria-labelledby="demo-controlled-radio-buttons-group"
                                    value={question.content.rule.or ? 1 : 0}
                                    onChange={(_, value) => {
                                        updateQuestionWithFnOptimistic(question.id, question => {
                                            question.content.rule.or = Boolean(Number(value));
                                        });
                                    }}
                                >
                                    {CONDITIONS.map((condition, index) => (
                                        <FormControlLabel
                                            key={index}
                                            sx={{ color: theme.palette.grey2.main }}
                                            value={index}
                                            control={
                                                <Radio
                                                    checkedIcon={<RadioCheck />}
                                                    icon={<RadioIcon />}
                                                />
                                            }
                                            label={condition}
                                        />
                                    ))}
                                </RadioGroup>
                            </FormControl>
                        </Box>
                        <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
                            <Button
                                variant="outlined"
                                onClick={handleClose}
                                sx={{ width: "100%", maxWidth: "130px" }}
                            >
                                Отмена
                            </Button>
                            <Button
                                variant="contained"
                                sx={{ width: "100%", maxWidth: "130px" }}
                                onClick={handleClose}
                            >
                                Готово
                            </Button>
                        </Box>
                    </Box>
                </Box>
            </Modal>
        </>
    );
}