import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
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, IconButton, 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 {useParams} from "react-router-dom";
import {questionStore} from "@root/questions";

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

export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) {
  const params = Number(useParams().quizId);
  const {listQuestions, updateQuestionsList, createQuestion, removeQuestion, openedModalSettings, createOpenedModalSettings} = questionStore()
  const openedModal = () => {
    createOpenedModalSettings({openedModalSettings: "open"})
    console.log(openedModalSettings)
  }
  const theme = useTheme();
  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",
          gap: "10px",
        }}
      >
        {buttonSetting.map(({ icon, title, value, myFunc}) => (
          <MiniButtonSetting
            key={title}
            onClick={() => {
              SSHC(value);
              {myFunc()}
            }}
            sx={{
              backgroundColor: switchState === value ? theme.palette.brightPurple.main : "transparent",
              color: switchState === value ? "#ffffff" : theme.palette.grey3.main,
            }}
          >
            {icon}
            {title}
          </MiniButtonSetting>
        ))}
      </Box>
      <Box
        sx={{
          padding: "20px",
        }}
      >
        <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
          <HideIcon color={"#4D4D4D"}/>
        </IconButton>
        <IconButton sx={{ borderRadius: "6px", padding: "2px" }}>
          <CopyIcon color={"#4D4D4D"}/>
        </IconButton>
        <IconButton sx={{ borderRadius: "6px", padding: "2px" }} onClick={() => removeQuestion(params, totalIndex)}>
          <DeleteIcon color={"#4D4D4D"}/>
        </IconButton>
      </Box>
    </Box>
  );
}