
import { QuestionType } from "@model/question/question";
import {
  Box,
  Button,
  IconButton,
  Modal,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import {
  copyQuestion,
  deleteQuestion,
  deleteQuestionWithTimeout,
} from "@root/questions/actions";
import { useQuestionsStore } from "@root/questions/store";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { updateDesireToOpenABranchingModal } from "@root/uiTools/actions";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import { ReallyChangingModal } from "@ui_kit/Modal/ReallyChangingModal/ReallyChangingModal";
import { DeleteFunction } from "@utils/deleteFunc";
import { memo, useState } from "react";
import { CopyIcon } from "@/assets/icons/questionsPage/CopyIcon";
import Branching from "@/assets/icons/questionsPage/branching";
import { DeleteIcon } from "@/assets/icons/questionsPage/deleteIcon";
import ImgIcon from "@/assets/icons/questionsPage/imgIcon";
import SettingIcon from "@/assets/icons/questionsPage/settingIcon";
import { DeleteBranchingQuestionModal } from "./DeleteBranchingQuestionModal";

interface Props {
  switchState: string;
  setSwitchState: (data: string) => void;
  openBranchingPage: boolean;
  setOpenBranchingPage: (a: boolean) => void;
  questionId: string;
  questionType: QuestionType;
  questionContentId: string;
  questionHasParent: boolean;
};

const IgnoreImage = ["images", "emoji", "number", "date", "select", "file", "rating"]

const ButtonsOptions = memo<Props>(function ({
  setSwitchState,
  switchState,
  openBranchingPage,
  setOpenBranchingPage,
  questionId,
  questionType,
  questionContentId,
  questionHasParent,
}) {
  const theme = useTheme();
  const quiz = useCurrentQuiz();
  const isQuestionFirst = useQuestionsStore((state) => state.questions[0]?.id === questionId,);

  const isIconMobile = useMediaQuery(theme.breakpoints.down(1050));
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const isIgnoreImage = !IgnoreImage.includes(questionType)

  const [buttonHover, setButtonHover] = useState<string>("");
  const [openedReallyChangingModal, setOpenedReallyChangingModal] = useState<boolean>(false);
  const [openDelete, setOpenDelete] = useState<boolean>(false);

  if (!quiz) return null;

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        width: "100%",
        background: "#f2f3f7",
        height: isMobile ? "92px" : "70px",
      }}
    >
      <Box
        sx={{
          padding: isMobile ? " 3px 12px 11px" : "20px",
          display: "flex",
          flexWrap: isMobile ? "wrap" : "nowrap",
          gap: "6px",
          maxWidth: isMobile ? "200px" : undefined,
        }}
      >
        <MiniButtonSetting
          onMouseEnter={() => setButtonHover("setting")}
          onMouseLeave={() => setButtonHover("")}
          onClick={() => {
            switchState === "setting" ? setSwitchState("") : setSwitchState("setting");
          }}
          sx={{
            maxWidth: "104px",
            minWidth: isIconMobile ? "30px" : "64px",
            height: "30px",
            backgroundColor:
              switchState === "setting"
                ? theme.palette.brightPurple.main
                : "transparent",
            color:
              switchState === "setting" ? "#ffffff" : theme.palette.grey3.main,
            "&:hover": {
              color:
                switchState === "setting" ? theme.palette.grey3.main : null,
            },
          }}
        >
          <SettingIcon
            color={
              buttonHover === "setting"
                ? theme.palette.grey3.main
                : switchState === "setting"
                  ? "#ffffff"
                  : theme.palette.grey3.main
            }
          />
          {isIconMobile ? null : "Настройки"}
        </MiniButtonSetting>
        {questionType !== "text" && (
          <MiniButtonSetting
            onMouseEnter={() => setButtonHover("branching")}
            onMouseLeave={() => setButtonHover("")}
            onClick={() => {
              setOpenBranchingPage(true);
              updateDesireToOpenABranchingModal(questionContentId);
            }}
            sx={{
              display: quiz.config.type === "form" ? "none" : "flex",
              height: "30px",
              maxWidth: "103px",
              minWidth: isIconMobile ? "30px" : "64px",
              backgroundColor:
                switchState === "branching"
                  ? theme.palette.brightPurple.main
                  : "transparent",
              color:
                switchState === "branching"
                  ? "#ffffff"
                  : theme.palette.grey3.main,
              "&:hover": {
                color:
                  switchState === "branching" ? theme.palette.grey3.main : null,
              },
            }}
          >
            <Branching
              color={
                buttonHover === "branching"
                  ? theme.palette.grey3.main
                  : switchState === "branching"
                    ? "#ffffff"
                    : theme.palette.grey3.main
              }
            />
            {isIconMobile ? null : "Ветвление"}
          </MiniButtonSetting>
        )}
        {isIgnoreImage &&
          <MiniButtonSetting
            onMouseEnter={() => setButtonHover("image")}
            onMouseLeave={() => setButtonHover("")}
            onClick={() => {
              switchState === "image" ? setSwitchState("") : setSwitchState("image");
            }}
            sx={{
              height: "30px",
              maxWidth: "123px",
              minWidth: isIconMobile ? "30px" : "64px",
              backgroundColor:
                switchState === "image"
                  ? theme.palette.brightPurple.main
                  : "transparent",
              color:
                switchState === "image" ? "#ffffff" : theme.palette.grey3.main,
              "&:hover": {
                color: switchState === "image" ? theme.palette.grey3.main : null,
              },
            }}
          >
            <ImgIcon
              color={
                buttonHover === "image"
                  ? theme.palette.grey3.main
                  : switchState === "image"
                    ? "#ffffff"
                    : theme.palette.grey3.main
              }
            />
            {isIconMobile ? null : "Изображение"}
          </MiniButtonSetting>
        }
      </Box>
      <Box
        sx={{
          padding: "20px",
        }}
      >
        <IconButton
          sx={{ borderRadius: "6px" }}
          onClick={() => copyQuestion(questionId, quiz.backendId)}
        >
          <CopyIcon style={{ color: "#4D4D4D" }} />
        </IconButton>
        {(quiz?.config.type !== "form" || !isQuestionFirst) && (
          <IconButton
            sx={{ borderRadius: "6px", padding: "2px" }}
            onClick={() => {
              if (questionType === null) {
                deleteQuestion(questionId);
              }
              if (questionHasParent) {
                setOpenDelete(true);
              } else {
                deleteQuestionWithTimeout(questionId, () =>
                  DeleteFunction(questionId),
                );
              }
            }}
            data-cy="delete-question"
          >
            <DeleteIcon style={{ color: "#4D4D4D" }} />
          </IconButton>
        )}
      </Box>
      <DeleteBranchingQuestionModal
        open={openDelete}
        onclose={() => setOpenDelete(false)}
        questionId={questionId}
      />
      <ReallyChangingModal
        opened={openedReallyChangingModal}
        onClose={() => setOpenedReallyChangingModal(false)}
      />
    </Box>
  );
});

export default ButtonsOptions;
