import { useState, useRef, useEffect, useLayoutEffect } from "react";
import {
  Box,
  Button,
  FormControl,
  FormControlLabel,
  Link,
  Modal,
  Radio,
  RadioGroup,
  Tooltip,
  Typography,
  useTheme,
  Checkbox,
} from "@mui/material";
import { enqueueSnackbar } from "notistack";
import {
  AnyTypedQuizQuestion,
  createBranchingRuleMain,
} from "../../../model/questionTypes/shared";
import { Select } from "../Select";

import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import InfoIcon from "@icons/Info";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";

import {
  getQuestionById,
  getQuestionByContentId,
  updateQuestion,
} from "@root/questions/actions";
import { updateOpenedModalSettingsId } from "@root/uiTools/actions";
import { useUiTools } from "@root/uiTools/store";

export const DeleteNodeModal = () => {
  const { deleteNodeId } = useUiTools();
  const targetQuestion = getQuestionById(deleteNodeId);

  const saveData = () => {
    // if (parentQuestion !== null) {
    //   updateQuestion(
    //     parentQuestion.content.id,
    //     (question) => (question.content = parentQuestion.content)
    //   );
    // }
    // handleClose();
  };

  const handleClose = () => {
    updateOpenedModalSettingsId();
  };

  return (
    <>
      <Modal open={!!deleteNodeId} 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: "#4d4d4d" }}>
              <Typography component="span">{targetQuestion?.title}</Typography>
            </Box>
            <Tooltip
              title="Настройте условия, при которых данный вопрос будет отображаться в квизе."
              placement="top"
            >
              <Box>
                <InfoIcon />
              </Box>
            </Tooltip>
          </Box>

          <Box
            sx={{
              display: "flex",
              justifyContent: "end",
              gap: "10px",
              margin: "20px",
            }}
          >
            <Button
              variant="outlined"
              onClick={handleClose}
              sx={{ width: "100%", maxWidth: "130px" }}
            >
              Отмена
            </Button>
            <Button
              variant="contained"
              sx={{ width: "100%", maxWidth: "130px" }}
              onClick={saveData}
            >
              Готово
            </Button>
          </Box>
        </Box>
      </Modal>
    </>
  );
};