import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import { useParams } from "react-router-dom";
import React from "react";
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 DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
import { questionStore, resetSomeField, copyQuestion, removeQuestion } from "@root/questions";

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

export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) {
  const quizId = Number(useParams().quizId);
  const { openedModalSettings } = questionStore();
  const openedModal = () => {
    resetSomeField({ openedModalSettings: "open" });
    console.log(openedModalSettings);
  };
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  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",
        justifyContent: "space-between",
        width: "100%",
        background: "#F2F3F7",
      }}
    >
      <Box
        sx={{
          padding: "20px",
          display: "flex",
          flexWrap: isMobile ? "wrap" : "nowrap",
          gap: "10px",
        }}
      >
        {buttonSetting.map(({ icon, title, value, myFunc }) => (
          <>
            {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: isMobile ? "30px" : "64px",
                    height: "30px",
                  }}
                >
                  {icon}

                  {isMobile ? 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: isMobile ? "30px" : "64px",
                  height: "30px",
                }}
              >
                {icon}
                {isMobile ? null : title}
              </MiniButtonSetting>
            )}
          </>
        ))}
      </Box>
      <Box
        sx={{
          padding: "20px",
          display: "flex",
        }}
      >
        <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>
  );
}