import { QuizQuestionVariant } from "@model/questionTypes/variant";
import { QuizQuestionVarImg } from "@model/questionTypes/varimg";
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 { useEffect, 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";

interface Props {
  switchState: string;
  SSHC: (data: string) => void;
  question: QuizQuestionVariant | QuizQuestionVarImg;
  openBranchingPage: boolean;
  setOpenBranchingPage: (a: boolean) => void;
}

export default function ButtonsOptionsAndPict({
  SSHC,
  switchState,
  question,
  openBranchingPage,
  setOpenBranchingPage,
}: Props) {
  const [buttonHover, setButtonHover] = useState<string>("");
  const [openedReallyChangingModal, setOpenedReallyChangingModal] =
    useState<boolean>(false);
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const isIconMobile = useMediaQuery(theme.breakpoints.down(1050));
  const { questions } = useQuestionsStore.getState();
  const quiz = useCurrentQuiz();

  const [openDelete, setOpenDelete] = useState<boolean>(false);

  useEffect(() => {
    if (question.deleteTimeoutId) {
      clearTimeout(question.deleteTimeoutId);
    }
  }, [question]);

  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={() => {
            SSHC("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>
        {/*<MiniButtonSetting*/}
        {/*    onMouseEnter={() => setButtonHover("help")}*/}
        {/*    onMouseLeave={() => setButtonHover("")}*/}
        {/*    onClick={() => {*/}
        {/*        SSHC("help");*/}
        {/*    }}*/}
        {/*    sx={{*/}
        {/*        minWidth: isIconMobile ? "30px" : "64px",*/}
        {/*        maxWidth: "102px",*/}
        {/*        height: "30px",*/}
        {/*        backgroundColor:*/}
        {/*            switchState === "help"*/}
        {/*                ? theme.palette.brightPurple.main*/}
        {/*                : "transparent",*/}
        {/*        color:*/}
        {/*            switchState === "help" ? "#ffffff" : theme.palette.grey3.main,*/}
        {/*        "&:hover": {*/}
        {/*            color: switchState === "help" ? theme.palette.grey3.main : null,*/}
        {/*        },*/}
        {/*    }}*/}
        {/*>*/}
        {/*    <Clue*/}
        {/*        color={*/}
        {/*            buttonHover === "help"*/}
        {/*                ? theme.palette.grey3.main*/}
        {/*                : switchState === "help"*/}
        {/*                    ? "#ffffff"*/}
        {/*                    : theme.palette.grey3.main*/}
        {/*        }*/}
        {/*    />*/}
        {/*    {isIconMobile ? null : "Подсказка"}*/}
        {/*</MiniButtonSetting>*/}
        <>
          {/* <Tooltip
                        arrow
                        placement="right"
                        componentsProps={{
                            tooltip: {
                                sx: {
                                    background: "#fff",
                                    borderRadius: "6px",
                                    color: "#9A9AAF",
                                    boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
                                    "& .MuiTooltip-arrow": {
                                        color: "#FFF",
                                    },
                                },
                            },
                        }}
                        title={
                            <Box>
                                <Typography
                                    sx={{
                                        color: "#4D4D4D",
                                        fontWeight: "bold",
                                        fontSize: "14px",
                                        marginBottom: "10px",
                                    }}
                                >
                                    Будет показан при условии
                                </Typography>
                                <Typography sx={{ fontWeight: "bold", fontSize: "12px" }}>
                                    Название
                                </Typography>
                                <Typography
                                    sx={{
                                        fontWeight: "bold",
                                        fontSize: "12px",
                                        marginBottom: "10px",
                                    }}
                                >
                                    Условие 1, Условие 2
                                </Typography>
                                <Typography sx={{ color: "#7E2AEA", fontSize: "12px" }}>
                                    Все условия обязательны
                                </Typography>
                            </Box>
                        }
                    > */}
          {question.type !== "text" && (
            <MiniButtonSetting
              onMouseEnter={() => setButtonHover("branching")}
              onMouseLeave={() => setButtonHover("")}
              onClick={() => {
                setOpenBranchingPage(true);
                updateDesireToOpenABranchingModal(question.content.id);
              }}
              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>
          )}
          {/* </Tooltip> */}
          <MiniButtonSetting
            onMouseEnter={() => setButtonHover("image")}
            onMouseLeave={() => setButtonHover("")}
            onClick={() => {
              SSHC("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>
          {/* <MiniButtonSetting
                        onClick={() => setOpenedReallyChangingModal(true)}
                        sx={{
                            minWidth: "30px",
                            height: "30px",
                            backgroundColor: "#FEDFD0",
                        }}
                    >
                        <DoubleTick style={{ color: "#FC712F", fontSize: "9px" }} />
                    </MiniButtonSetting>
                    <MiniButtonSetting
                        onClick={() => setOpenedReallyChangingModal(true)}
                        sx={{
                            minWidth: "30px",
                            height: "30px",
                            backgroundColor: "#FEDFD0",
                        }}
                    >
                        <DoubleArrowRight style={{ color: "#FC712F", fontSize: "9px" }} />
                    </MiniButtonSetting>
                    <MiniButtonSetting
                        onClick={() => setOpenedReallyChangingModal(true)}
                        sx={{
                            minWidth: "30px",
                            height: "30px",
                            backgroundColor: "#FEDFD0",
                        }}
                    >
                        <VectorQuestions style={{ color: "#FC712F", fontSize: "9px" }} />
                    </MiniButtonSetting> */}
        </>
      </Box>
      <Box
        sx={{
          padding: "20px",
        }}
      >
        {/* <IconButton sx={{ borderRadius: "6px", padding: "0px 2px" }}>
                    <HideIcon style={{ color: "#4D4D4D" }} />
                </IconButton> */}
        <IconButton
          sx={{ borderRadius: "6px" }}
          onClick={() => copyQuestion(question.id, question.quizId)}
        >
          <CopyIcon style={{ color: "#4D4D4D" }} />
        </IconButton>
        {(quiz?.config.type !== "form" || question.id !== questions[0].id) && (
          <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),
                );
              }
            }}
            data-cy="delete-question"
          >
            <DeleteIcon style={{ 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),
                  );
                }}
              >
                Подтвердить
              </Button>
            </Box>
          </Box>
        </Modal>
      </Box>
      <ReallyChangingModal
        opened={openedReallyChangingModal}
        onClose={() => setOpenedReallyChangingModal(false)}
      />
    </Box>
  );
}