import { useState, useEffect } from "react";
import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import { useParams } from "react-router-dom";
import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
import Clue from "../../assets/icons/questionsPage/clue";
import Branching from "../../assets/icons/questionsPage/branching";
import {
  Box,
  Typography,
  Tooltip,
  IconButton,
  useTheme,
  useMediaQuery,
} from "@mui/material";
import { HideIcon } from "../../assets/icons/questionsPage/hideIcon";
import { CopyIcon } from "../../assets/icons/questionsPage/CopyIcon";

import {
  questionStore,
  resetSomeField,
  copyQuestion,
  removeQuestionForce,
  updateQuestionsList,
  removeQuestion,
} from "@root/questions";
import { quizStore } from "@root/quizes";
import { DoubleTick } from "@icons/questionsPage/DoubleTick";
import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";

import type { SxProps } from "@mui/material";
import type { QuizQuestionBase } from "../../model/questionTypes/shared";

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

export default function ButtonsOptions({
  SSHC,
  switchState,
  totalIndex,
}: Props) {
  const quizId = Number(useParams().quizId);
  const { openedModalSettings, listQuestions } = questionStore();
  const { listQuizes } = quizStore();
  const [openedReallyChangingModal, setOpenedReallyChangingModal] =
    useState<boolean>(false);
  const quize = listQuizes[quizId];
  const question = listQuestions[quizId][totalIndex] as QuizQuestionBase;

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

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

  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920));

  const buttonSetting: {
    icon: JSX.Element;
    title: string;
    value: string;
    myFunc?: any;
  }[] = [
    {
      icon: (
        <SettingIcon
          color={
            switchState === "setting" ? "#ffffff" : theme.palette.grey3.main
          }
        />
      ),
      title: "Настройки",
      value: "setting",
    },
    {
      icon: (
        <Clue
          color={switchState === "help" ? "#ffffff" : theme.palette.grey3.main}
        />
      ),
      title: "Подсказка",
      value: "help",
    },
    {
      icon: (
        <Branching
          color={
            switchState === "branching" ? "#ffffff" : theme.palette.grey3.main
          }
        />
      ),
      title: "Ветвление",
      value: "branching",
      myFunc: openedModal,
    },
  ];

  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",
        }}
      >
        {buttonSetting.map(({ icon, title, value, myFunc }) => (
          <Box key={value}>
            {value === "branching" ? (
              <Tooltip
                arrow
                placement="right"
                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
                  key={title}
                  onClick={() => {
                    SSHC(value);
                    myFunc();
                  }}
                  sx={{
                    backgroundColor:
                      switchState === value
                        ? theme.palette.brightPurple.main
                        : "transparent",
                    color:
                      switchState === value
                        ? "#ffffff"
                        : theme.palette.grey3.main,
                    minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
                    height: "30px",
                    "&:hover": {
                      color: theme.palette.grey3.main,
                      "& path": { stroke: theme.palette.grey3.main },
                    },
                  }}
                >
                  {icon}
                  {isWrappMiniButtonSetting ? null : title}
                </MiniButtonSetting>
              </Tooltip>
            ) : (
              <>
                <MiniButtonSetting
                  key={title}
                  onClick={() => {
                    SSHC(value);
                    myFunc();
                  }}
                  sx={{
                    backgroundColor:
                      switchState === value
                        ? theme.palette.brightPurple.main
                        : "transparent",
                    color:
                      switchState === value
                        ? "#ffffff"
                        : theme.palette.grey3.main,
                    minWidth: isWrappMiniButtonSetting ? "30px" : "64px",
                    height: "30px",
                    "&:hover": {
                      color: theme.palette.grey3.main,
                      "& path": { stroke: theme.palette.grey3.main },
                    },
                  }}
                >
                  {icon}
                  {isWrappMiniButtonSetting ? null : title}
                </MiniButtonSetting>
              </>
            )}
          </Box>
        ))}
        <>
          <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",
          display: "flex",
        }}
      >
        <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
          <HideIcon style={{ color: "#4D4D4D" }} />
        </IconButton>
        <IconButton
          sx={{ borderRadius: "6px", padding: "2px" }}
          onClick={() => copyQuestion(quizId, totalIndex)}
        >
          <CopyIcon 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 color={"#4D4D4D"} />
        </IconButton>
      </Box>
    </Box>
  );
}