frontPanel/src/pages/startPage/EditPage.tsx

import { quizApi } from "@api/quiz";
import { LogoutButton } from "@ui_kit/LogoutButton";
import BackArrowIcon from "@icons/BackArrowIcon";
import { Burger } from "@icons/Burger";
import EyeIcon from "@icons/EyeIcon";
import { PenaLogoIcon } from "@icons/PenaLogoIcon";
import VisibilityIcon from "@mui/icons-material/Visibility";

import {
  Box,
  Button,
  Container,
  FormControl,
  IconButton,
  Switch,
  TextField,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import {
  resetEditConfig,
  setQuizes,
  updateQuiz,
  setCurrentStep,
} from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuizStore } from "@root/quizes/store";
import CustomAvatar from "@ui_kit/Header/Avatar";
import NavMenuItem from "@ui_kit/Header/NavMenuItem";
import PenaLogo from "@ui_kit/PenaLogo";
import Sidebar from "@ui_kit/Sidebar";
import Stepper from "@ui_kit/Stepper";
import SwitchStepPages from "@ui_kit/switchStepPages";
import { isAxiosError } from "axios";
import { enqueueSnackbar } from "notistack";
import React, { useEffect, useLayoutEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import useSWR from "swr";
import { useDebouncedCallback } from "use-debounce";
import { SidebarMobile } from "./Sidebar/SidebarMobile";
import {
  cleanQuestions,
  createResult,
  setQuestions,
} from "@root/questions/actions";
import {
  updateOpenBranchingPanel,
  updateCanCreatePublic,
  updateModalInfoWhyCantCreate,
  setShowConfirmLeaveModal,
  updateSomeWorkBackend,
} from "@root/uiTools/actions";
import { BranchingPanel } from "../Questions/BranchingPanel";
import { Header } from "./Header";
import { useQuestionsStore } from "@root/questions/store";
import { useQuizes } from "@root/quizes/hooks";
import { questionApi } from "@api/question";
import { useUiTools } from "@root/uiTools/store";

import Logotip from "../Landing/images/icons/QuizLogo";
import { clearUserData } from "@root/user";
import { clearAuthToken } from "@frontend/kitui";
import { logout } from "@api/auth";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { ModalInfoWhyCantCreate } from "./ModalInfoWhyCantCreate";
import { ConfirmLeaveModal } from "./ConfirmLeaveModal";
import { checkQuestionHint } from "@utils/checkQuestionHint";
import { deleteTimeoutedQuestions } from "@utils/deleteTimeoutedQuestions";
import { toggleQuizPreview } from "@root/quizPreview";
import { LinkSimple } from "@icons/LinkSimple";
import { BackButtonIcon } from "@icons/BackButtonIcon";
import { TreeStructure } from "@icons/TreeStructure";

let init: () => void;
export default function EditPage() {
  const quiz = useCurrentQuiz();
  const { editQuizId } = useQuizStore();
  const { questions } = useQuestionsStore();
  console.log(questions);

  useEffect(() => {
    const getData = async () => {
      const quizes = await quizApi.getList();
      setQuizes(quizes);

      if (editQuizId) {
        const questions = await questionApi.getList({ quiz_id: editQuizId });
        console.log(questions);
        setQuestions(questions);
        //Всегда должен существовать хоть 1 резулт - "line"
        // console.log("сейчас будем ворошиться в этих квешенах ", questions);

        if (
          !questions?.find(
            (q) =>
              (q.type === "result" && q.content.includes(':"line"')) ||
              q.content.includes(":'line'"),
          )
        ) {
          createResult(quiz?.backendId, "line");
          console.log("Я не нашёл линейный резулт и собираюсь создать новый");
        }
      }
    };
    getData();
  }, []);

  const {
    openBranchingPanel,
    whyCantCreatePublic,
    canCreatePublic,
    showConfirmLeaveModal,
  } = useUiTools();
  const theme = useTheme();
  const navigate = useNavigate();
  const currentStep = useQuizStore((state) => state.currentStep);
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isBranchingLogic = useMediaQuery(theme.breakpoints.down(1100));
  const isMobile = useMediaQuery(theme.breakpoints.down(660));
  const isLinkButton = useMediaQuery(theme.breakpoints.down(708));
  const isMobileSm = useMediaQuery(theme.breakpoints.down(370));
  const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);
  const [nextStep, setNextStep] = useState<number>(0);
  const quizConfig = quiz?.config;
  const disableTest = quiz === undefined ? true : quiz.config.type === null;
  const [openBranchingPage, setOpenBranchingPage] = useState<boolean>(false);
  const [buttonText, setButtonText] = useState(
    quiz?.status === "stop" ? "Опубликовать" : "Отозвать",
  );

  const openBranchingPageHC = () => {
    if (!openBranchingPage) {
      deleteTimeoutedQuestions(questions, quiz);
    }
    setOpenBranchingPage((old) => !old);
  };

  useEffect(() => {
    if (editQuizId === null) navigate("/list");
  }, [navigate, editQuizId]);

  useEffect(
    () => () => {
      // resetEditConfig();
      cleanQuestions();
      updateModalInfoWhyCantCreate(false);
      updateSomeWorkBackend(false);
    },
    [],
  );

  const updateQuestionHint = useDebouncedCallback(
    (questions: AnyTypedQuizQuestion[]) => {
      const problems = checkQuestionHint(questions, quiz);
      useUiTools.setState({ whyCantCreatePublic: problems });
      if (Object.keys(problems).length > 0) {
        updateQuiz(quiz?.id, (state) => {
          state.status = "stop";
        });
        setButtonText("Опубликовать");
        updateCanCreatePublic(false);
      } else {
        updateCanCreatePublic(true);
      }
    },
    600,
  );

  useEffect(() => {
    updateQuestionHint(questions);
  }, [questions, quiz]);

  const followNewPage = () => {
    setShowConfirmLeaveModal(false);
    setCurrentStep(nextStep);
  };

  if (!quizConfig) return <></>;

  const isConditionMet =
    [1].includes(currentStep) &&
    !openBranchingPanel &&
    quizConfig.type !== "form";

  const handleClickStatusQuiz = () => {
    if (Object.keys(whyCantCreatePublic).length === 0) {
      if (buttonText === "Опубликовать") {
        setButtonText("Опубликовано");
        setTimeout(() => {
          setButtonText("Отозвать");
        }, 1500);
      } else {
        setButtonText("Опубликовать");
      }

      updateQuiz(quiz?.id, (state) => {
        state.status = quiz?.status === "start" ? "stop" : "start";
      });
    } else {
      updateModalInfoWhyCantCreate(true);
    }
  };

  const changePage = (index: number) => {
    if (currentStep === 2) {
      setNextStep(index);
      setShowConfirmLeaveModal(true);

      return;
    }

    setCurrentStep(index);
  };

  return (
    <>
      <Header setMobileSidebar={setMobileSidebar} />
      <Box
        sx={{
          display: isMobile ? "block" : "flex",
          position: "relative",
        }}
      >
        {isMobile ? (
          <SidebarMobile open={mobileSidebar} changePage={changePage} />
        ) : (
          <Sidebar changePage={changePage} />
        )}
        <Box
          sx={{
            background: theme.palette.background.default,
            width: "100%",
            overflow: "hidden",
          }}
        >
          <Box
            sx={{
              padding: isMobile ? "16px 16px 20px 16px" : "25px 25px 20px 25px",
              overflow: "auto",
              height: isMobile
                ? `calc(100vh - 125px)`
                : isConditionMet
                  ? isBranchingLogic
                    ? `calc(100vh - 166px)`
                    : `calc(100vh - 186px)`
                  : `calc(100vh - 166px)`,
              boxSizing: "border-box",
            }}
          >
            {/* Выбор текущей страницы редактирования чего-либо находится здесь */}
            {quizConfig && (
              <>
                <Stepper activeStep={currentStep} />
                <SwitchStepPages
                  activeStep={currentStep}
                  quizType={quizConfig.type}
                  quizResults={quizConfig.results}
                  quizStartPageType={quizConfig.startpageType}
                  openBranchingPage={openBranchingPage}
                  setOpenBranchingPage={setOpenBranchingPage}
                />
              </>
            )}
          </Box>
          <Box
            sx={{
              width: "100%",
              padding: isMobile ? "20px 16px" : "20px 20px",
              display: "flex",
              justifyContent: isMobile
                ? isMobileSm
                  ? "center"
                  : "flex-end"
                : "flex-start",
              flexDirection: isMobile ? "row-reverse" : "-moz-initial",
              alignItems: "center",
              gap: "15px",
              background: "#FFF",
            }}
          >
            {isConditionMet &&
              (isBranchingLogic ? (
                <Box
                  sx={{
                    width: "77px",
                    height: "51px",
                    position: "fixed",
                    zIndex: "99999",
                    right: "0",
                    top: "20%",
                    background: "#333647",
                    borderTopLeftRadius: "8px",
                    borderBottomLeftRadius: "8px",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  <Switch
                    icon={<TreeStructure />}
                    checkedIcon={<TreeStructure />}
                    checked={openBranchingPage}
                    onChange={openBranchingPageHC}
                    sx={{
                      width: 50,
                      height: 30,
                      padding: 0,
                      "& .MuiSwitch-switchBase": {
                        padding: 0,
                        margin: "2px",
                        width: "26px",
                        height: "26px",
                        background: "#fff",
                        transitionDuration: "300ms",
                        "&:hover": {
                          backgroundColor: "#fff !important",
                        },
                        "&:active": {
                          background: "#fff",
                        },
                        "&.Mui-checked": {
                          transform: "translateX(20px)",
                          color: theme.palette.brightPurple.main,
                          "& + .MuiSwitch-track": {
                            backgroundColor: "#7E2AEA",
                            opacity: 1,
                            border: 0,
                          },
                          "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
                        },
                        "&.Mui-disabled .MuiSwitch-thumb": {
                          color:
                            theme.palette.mode === "light"
                              ? theme.palette.grey[100]
                              : theme.palette.grey[600],
                        },
                        "&.Mui-disabled + .MuiSwitch-track": {
                          opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
                        },
                      },
                      "& .MuiSwitch-thumb": {
                        boxSizing: "border-box",
                        width: 25,
                        height: 25,
                      },
                      "& .MuiSwitch-track": {
                        backgroundColor: "rgba(217, 188, 255, 0.16)",
                        borderRadius: 13,
                        opacity: 1,
                        transition: theme.transitions.create(
                          ["background-color"],
                          {
                            duration: 500,
                          },
                        ),
                      },
                    }}
                  />
                </Box>
              ) : (
                <Box
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    gap: "15px",
                    padding: "18px",
                    background: "#fff",
                    borderRadius: "12px",
                    boxShadow: "0px 10px 30px #e7e7e7",
                  }}
                >
                  <Switch
                    checked={openBranchingPage}
                    onChange={openBranchingPageHC}
                    sx={{
                      width: 50,
                      height: 30,
                      padding: 0,
                      "& .MuiSwitch-switchBase": {
                        padding: 0,
                        margin: "2px",
                        transitionDuration: "300ms",
                        "&.Mui-checked": {
                          transform: "translateX(20px)",
                          color: theme.palette.brightPurple.main,
                          "& + .MuiSwitch-track": {
                            backgroundColor: "#E8DCF9",
                            opacity: 1,
                            border: 0,
                          },
                          "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
                        },
                        "&.Mui-disabled .MuiSwitch-thumb": {
                          color:
                            theme.palette.mode === "light"
                              ? theme.palette.grey[100]
                              : theme.palette.grey[600],
                        },
                        "&.Mui-disabled + .MuiSwitch-track": {
                          opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
                        },
                      },
                      "& .MuiSwitch-thumb": {
                        boxSizing: "border-box",
                        width: 25,
                        height: 25,
                      },
                      "& .MuiSwitch-track": {
                        borderRadius: 13,
                        backgroundColor:
                          theme.palette.mode === "light"
                            ? "#E9E9EA"
                            : "#39393D",
                        opacity: 1,
                        transition: theme.transitions.create(
                          ["background-color"],
                          {
                            duration: 500,
                          },
                        ),
                      },
                    }}
                  />
                  <Box>
                    <Typography
                      sx={{
                        fontWeight: "bold",
                        color: "#4D4D4D",
                        whiteSpace: "nowrap",
                      }}
                    >
                      Логика ветвления
                    </Typography>
                  </Box>
                </Box>
              ))}

            <Box sx={{ display: isMobile ? "none" : "block" }}>
              {!canCreatePublic && quiz.config.type !== "form" ? (
                <Button
                  variant="contained"
                  // disabled
                  sx={{
                    fontSize: "14px",
                    lineHeight: "18px",
                    height: "34px",
                    whiteSpace: "nowrap",
                    minWidth: "130px",
                  }}
                  onClick={() =>
                    Object.keys(whyCantCreatePublic).length === 0
                      ? () => {}
                      : updateModalInfoWhyCantCreate(true)
                  }
                >
                  Тестовый просмотр
                </Button>
              ) : (
                <a
                  href={`/view`}
                  target="_blank"
                  rel="noreferrer"
                  style={{ textDecoration: "none" }}
                >
                  <Button
                    variant="contained"
                    sx={{
                      fontSize: "14px",
                      whiteSpace: "nowrap",
                      lineHeight: "18px",
                      height: "34px",
                    }}
                  >
                    Тестовый просмотр
                  </Button>
                </a>
              )}
            </Box>

            <Button
              variant="contained"
              sx={{
                fontSize: "14px",
                lineHeight: "18px",
                height: "34px",
                background:
                  buttonText === "Опубликовано" ? "#FA5B0E" : "#7E2AEA",
                p: "0 18px",
                minWidth: "120px",
              }}
              onClick={handleClickStatusQuiz}
            >
              {buttonText === "Отозвать" ? (
                <Box sx={{ display: "flex", gap: "4px", alignItems: "center" }}>
                  {buttonText} <BackButtonIcon />
                </Box>
              ) : (
                buttonText
              )}
            </Button>
            {quiz?.status === "start" &&
              (!isLinkButton ? (
                <Box
                  component={Link}
                  sx={{
                    whiteSpace: "nowrap",
                    textOverflow: "ellipsis",
                    overflow: "hidden",
                    display: isMobile ? "none" : "block",
                    color: "#7E2AEA",
                    fontSize: "14px",
                  }}
                  target="_blank"
                  to={"https://hbpn.link/" + quiz.qid}
                >
                  https://hbpn.link/{quiz.qid}
                </Box>
              ) : (
                <Box
                  component={Link}
                  sx={{
                    cursor: "pointer",
                    minWidth: "34px",
                    height: "34px",
                    color: "#7E2AEA",
                    fontSize: "14px",
                    display: isMobile ? "none" : "flex",
                    justifyContent: "center",
                    alignItems: "Center",
                    background: "#EEE4FC",
                    borderRadius: "8px",
                  }}
                  target="_blank"
                  to={"https://hbpn.link/" + quiz.qid}
                >
                  <LinkSimple />
                </Box>
              ))}

            {isMobile ? (
              <Button
                onClick={toggleQuizPreview}
                variant="outlined"
                sx={{
                  display: "flex",
                  gap: "4px",
                  fontSize: "14px",
                  lineHeight: "18px",
                  height: "34px",
                  border: "1px solid #7E2AEA",
                  color: "#7E2AEA",
                  background: "white",
                  p: "8px 14px",
                }}
              >
                <EyeIcon />
                Предпросмотр
              </Button>
            ) : (
              <IconButton
                onClick={toggleQuizPreview}
                sx={{
                  pointerEvents: "auto",
                  marginLeft: "auto",
                  position: "relative",
                  zIndex: "999999",
                }}
              >
                <VisibilityIcon sx={{ height: "30px", width: "30px" }} />
              </IconButton>
            )}

            {isMobile && quiz?.status === "start" && (
              <Box
                component={Link}
                sx={{
                  cursor: "pointer",
                  width: "34px",
                  height: "34px",
                  color: "#7E2AEA",
                  fontSize: "14px",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "Center",
                  background: "#EEE4FC",
                  borderRadius: "8px",
                }}
                target="_blank"
                to={"https://hbpn.link/" + quiz.qid}
              >
                <LinkSimple />
              </Box>
            )}
          </Box>
        </Box>
      </Box>
      <ModalInfoWhyCantCreate />
      <ConfirmLeaveModal
        open={showConfirmLeaveModal}
        follow={followNewPage}
        cancel={() => setShowConfirmLeaveModal(false)}
      />
    </>
  );
}