frontPanel/src/pages/Questions/PageOptions/PageOptions.tsx

import { Box, Button, IconButton, Modal, Typography, useMediaQuery, useTheme } from "@mui/material";
import { copyQuestion, deleteQuestion, deleteQuestionWithTimeout, updateQuestion } from "@root/questions/actions";
import CustomTextField from "@ui_kit/CustomTextField";

import { CopyIcon } from "@icons/questionsPage/CopyIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { MediaSelectionAndDisplay } from "@ui_kit/MediaSelectionAndDisplay";
import { DeleteFunction } from "@utils/deleteFunc";
import { useState } from "react";
import type { QuizQuestionPage } from "@frontend/squzanswerer";

type Props = {
  disableInput?: boolean;
  question: QuizQuestionPage;
  openBranchingPage: boolean;
  setOpenBranchingPage: (a: boolean) => void;
};

export default function PageOptions({ disableInput, question }: Props) {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(980));
  const isFigmaTablet = useMediaQuery(theme.breakpoints.down(990));
  const isMobile = useMediaQuery(theme.breakpoints.down(780));
  const [openDelete, setOpenDelete] = useState<boolean>(false);

  const setText = (value: string) => {
    updateQuestion(question.id, (question) => {
      if (question.type !== "page") return;

      question.content.text = value;
    });
  };

  return (
    <>
      <Box
        sx={{
          width: isTablet ? "auto" : "100%",
          maxWidth: isFigmaTablet ? "549px" : "640px",
          display: "flex",
          px: "20px",
          flexDirection: "column",
        }}
      >
        <Box
          sx={{
            display: disableInput ? "none" : "",
            mt: isMobile ? "15px" : "0px",
          }}
        >
          <CustomTextField
            id="addText"
            placeholder={"Можно добавить текст"}
            value={question.content.text}
            onChange={({ target }) => setText(target.value)}
            maxLength={700}
          />
        </Box>

        <MediaSelectionAndDisplay
          question={question}
          cropAspectRatio={{ width: 1388.8, height: 793.2 }}
        />
      </Box>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "end",
          width: "100%",
          background: "#f2f3f7",
          height: isMobile ? "92px" : "70px",
        }}
      >
        <Box
          sx={{
            padding: "20px",
            display: "flex",
            gap: "6px",
          }}
        >
          <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.type === null) {
                deleteQuestion(question.id);
              }
              if (question.content.rule.parentId?.length !== 0) {
                setOpenDelete(true);
              } else {
                deleteQuestionWithTimeout(question.id, () => DeleteFunction(question.id));
              }
            }}
            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, () => DeleteFunction(question.id));
                  }}
                >
                  Подтвердить
                </Button>
              </Box>
            </Box>
          </Modal>
        </Box>
      </Box>
    </>
  );
}