frontPanel/src/pages/Questions/ButtonsOptions.tsx

import { useState } 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 DeleteIcon from "../../assets/icons/questionsPage/deleteIcon";
import {
  questionStore,
  resetSomeField,
  copyQuestion,
  removeQuestion,
} from "@root/questions";
import { DoubleTick } from "@icons/questionsPage/DoubleTick";
import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";

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 [openedReallyChangingModal, setOpenedReallyChangingModal] =
    useState<boolean>(false);

  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 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",
        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 }) => (
          <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",
                  }}
                >
                  {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",
                }}
              >
                {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 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>
  );
}