import { useState } 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 {
  questionStore,
  copyQuestion,
  removeQuestion,
  resetSomeField,
} from "@root/questions";

import "./ButtonsOptionsAndPict.css";

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 { openedModalSettings } = questionStore();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const isIconMobile = useMediaQuery(theme.breakpoints.down(930));

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

  return (
    <Box
      sx={{
        display: "flex",
        justifyContent: "space-between",
        width: "100%",
        background: "#f2f3f7",
      }}
    >
      <Box
        sx={{
          padding: "20px",
          display: "flex",
          flexWrap: isMobile ? "wrap" : "nowrap",
          gap: "10px",
        }}
      >
        <MiniButtonSetting
          onMouseEnter={() => setButtonHover("setting")}
          onMouseLeave={() => setButtonHover("")}
          onClick={() => {
            SSHC("setting");
          }}
          sx={{
            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",
            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"
          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",
              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",
            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", padding: "2px" }}>
          <HideIcon color={"#4D4D4D"} />
        </IconButton>
        <IconButton
          sx={{ borderRadius: "6px", padding: "2px" }}
          onClick={() => copyQuestion(quizId, totalIndex)}
        >
          <CopyIcon color={"#4D4D4D"} />
        </IconButton>
        <IconButton
          sx={{ borderRadius: "6px", padding: "2px" }}
          onClick={() => removeQuestion(quizId, totalIndex)}
        >
          <DeleteIcon color={"#4D4D4D"} />
        </IconButton>
      </Box>
    </Box>
  );
}