import { useState, useEffect } from "react";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
import Clue from "../../assets/icons/questionsPage/clue";
import Branching from "../../assets/icons/questionsPage/branching";
import {
  Box,
  IconButton,
  Tooltip,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { HideIcon } from "../../assets/icons/questionsPage/hideIcon";
import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";
import { DeleteIcon } from "../../assets/icons/questionsPage/deleteIcon";
import ImgIcon from "../../assets/icons/questionsPage/imgIcon";
import { useParams } from "react-router-dom";
import { quizStore } from "@root/quizes";
import {
  questionStore,
  copyQuestion,
  removeQuestion,
  resetSomeField,
  removeQuestionForce,
  updateQuestionsList,
} from "@root/questions";
import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
import { DoubleTick } from "@icons/questionsPage/DoubleTick";
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
import { ReallyChangingModal } from "@ui_kit/Modal/ReallyChangingModal/ReallyChangingModal";

import type { QuizQuestionBase } from "../../model/questionTypes/shared";

interface Props {
  switchState: string;
  SSHC: (data: string) => void;
  totalIndex: number;
}

export default function ButtonsOptionsAndPict({
  SSHC,
  switchState,
  totalIndex,
}: Props) {
  const [buttonHover, setButtonHover] = useState<string>("");
  const quizId = Number(useParams().quizId);
  const { listQuizes } = quizStore();
  const { listQuestions } = questionStore();
  const [openedReallyChangingModal, setOpenedReallyChangingModal] =
    useState<boolean>(false);
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const isIconMobile = useMediaQuery(theme.breakpoints.down(1050));
  const quize = listQuizes[quizId];
  const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;

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

  const openedModal = () => {
    resetSomeField({ openedModalSettings: "open" });
  };

  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",
        }}
      >
        <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>
        {quize.config.type === "quize" && (
          <>
            <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>
              }
            >
              <MiniButtonSetting
                onMouseEnter={() => setButtonHover("branching")}
                onMouseLeave={() => setButtonHover("")}
                onClick={() => {
                  SSHC("branching");
                  openedModal();
                }}
                sx={{
                  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(quizId, totalIndex)}
        >
          <CopyIcon style={{ color: "#4D4D4D" }} />
        </IconButton>
        <IconButton
          sx={{ borderRadius: "6px", padding: "2px" }}
          onClick={() => {
            const removedId = question.id;
            if (question.deleteTimeoutId) {
              clearTimeout(question.deleteTimeoutId);
            }

            removeQuestion(quizId, totalIndex);

            const newTimeoutId = window.setTimeout(() => {
              removeQuestionForce(quizId, removedId);
            }, 5000);

            updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
              ...question,
              deleteTimeoutId: newTimeoutId,
            });
          }}
        >
          <DeleteIcon style={{ color: "#4D4D4D" }} />
        </IconButton>
      </Box>
      <ReallyChangingModal
        opened={openedReallyChangingModal}
        onClose={() => setOpenedReallyChangingModal(false)}
      />
    </Box>
  );
}