import { useLayoutEffect, useState } from "react";
import {
  Box,
  Button,
  Checkbox,
  FormControlLabel,
  Link,
  Modal,
  Tooltip,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { createBranchingRuleMain } from "../../../../model/questionTypes/shared";
import InfoIcon from "@icons/Info";

import { TypeSwitch } from "./Settings";
import { getQuestionByContentId, getQuestionById, updateQuestion } from "@root/questions/actions";
import { updateOpenedModalSettingsId } from "@root/uiTools/actions";
import { useUiTools } from "@root/uiTools/store";
import { enqueueSnackbar } from "notistack";
import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
import { AnyTypedQuizQuestion } from "@frontend/squzanswerer";

export default function BranchingQuestions() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(650));
  const isSmallMobile = useMediaQuery(theme.breakpoints.down(400));
  const { openedModalSettingsId } = useUiTools();
  const [targetQuestion, setTargetQuestion] = useState<AnyTypedQuizQuestion | null>(
    getQuestionById(openedModalSettingsId) || getQuestionByContentId(openedModalSettingsId)
  );
  const [parentQuestion, setParentQuestion] = useState<AnyTypedQuizQuestion | null>(
    getQuestionByContentId(targetQuestion?.content.rule.parentId)
  );

  useLayoutEffect(() => {
    if (parentQuestion === null) return;
    if (parentQuestion.content.rule.main.length === 0) {
      let mutate = JSON.parse(JSON.stringify(parentQuestion));
      mutate.content.rule.main = [
        {
          next: targetQuestion.content.id,
          or: true,
          rules: [
            {
              question: parentQuestion.content.id,
              answers: [],
            },
          ],
        },
      ];
      setParentQuestion(mutate);
    }
  });

  if (targetQuestion === null || parentQuestion === null) {
    enqueueSnackbar("Невозможно найти данные ветвления для этого вопроса");
    return <></>;
  }

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

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

  return (
    <>
      <Modal
        open={openedModalSettingsId !== null}
        onClose={handleClose}
      >
        <Box
          sx={{
            position: "absolute",
            overflow: "hidden",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            maxWidth: "620px",
            width: "90%",
            bgcolor: "background.paper",
            borderRadius: "12px",
            boxShadow: 24,
            p: 0,
          }}
        >
          <>
            <Box
              sx={{
                boxSizing: "border-box",
                background: "#F2F3F7",
                height: "70px",
                padding: "25px 20px",
                display: "flex",
                alignItems: "center",
                color: "#9A9AAF",
                gap: "10px",
              }}
            >
              <Typography
                component="span"
                sx={{
                  lineHeight: "1",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                  maxWidth: isSmallMobile ? "250px" : isMobile ? "350px" : "450px",
                  display: "inline-block",
                }}
              >
                {targetQuestion.title}
              </Typography>
              {isMobile ? (
                <TooltipClickInfo title={"Настройте условия, при которых данный вопрос будет отображаться в quiz."} />
              ) : (
                <Tooltip
                  title="Настройте условия, при которых данный вопрос будет отображаться в quiz."
                  placement="top"
                >
                  <Box>
                    <InfoIcon sx={{ padding: 0 }} />
                  </Box>
                </Tooltip>
              )}
            </Box>

            <Box
              sx={{
                height: "400px",
                overflow: "auto",
              }}
            >
              {parentQuestion.content.rule.main.length ? (
                parentQuestion.content.rule.main.map((e: any, i: number) => {
                  if (e.next === targetQuestion.content.id) {
                    return (
                      <TypeSwitch
                        key={i}
                        setParentQuestion={setParentQuestion}
                        targetQuestion={targetQuestion}
                        parentQuestion={parentQuestion}
                        ruleIndex={i}
                      />
                    );
                  } else {
                    <></>;
                  }
                })
              ) : (
                <TypeSwitch
                  targetQuestion={targetQuestion}
                  setParentQuestion={setParentQuestion}
                  parentQuestion={parentQuestion}
                  ruleIndex={0}
                />
              )}
            </Box>

            <Box
              sx={{
                margin: "20px 0 0 20px",
                display: "flex",
                flexDirection: "column",
              }}
            >
              <Link
                variant="body2"
                sx={{
                  color: theme.palette.brightPurple.main,
                  marginBottom: "10px",
                  cursor: "pointer",
                }}
                onClick={() => {
                  const mutate = JSON.parse(JSON.stringify(parentQuestion));
                  mutate.content.rule.main.push(
                    createBranchingRuleMain(targetQuestion.content.id, parentQuestion.content.id)
                  );
                  setParentQuestion(mutate);
                }}
              >
                Добавить условие
              </Link>

              <FormControlLabel
                control={
                  <Checkbox
                    sx={{
                      margin: 0,
                    }}
                    checked={parentQuestion.content.rule.default === targetQuestion.content.id}
                    onClick={() => {
                      let mutate = JSON.parse(JSON.stringify(parentQuestion));

                      if (parentQuestion.content.rule.children.length === 1) {
                        //Если потомок 1 - можно только чекнуть чекбокс (по-умолчанию и так должен быть чекнут единственный)
                        mutate.content.rule.default = targetQuestion.content.id;
                      } else {
                        //Изменять чекбокс можно только если много потомков
                        mutate.content.rule.default =
                          parentQuestion.content.rule.default === targetQuestion.content.id
                            ? ""
                            : targetQuestion.content.id;
                      }

                      setParentQuestion(mutate);
                    }}
                  />
                }
                label="Следующий вопрос по-умолчанию"
              />
            </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>
    </>
  );
}
