frontPanel/src/pages/Questions/ButtonsOptions.tsx

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 { DoubleTick } from "@icons/questionsPage/DoubleTick";
import { DoubleArrowRight } from "@icons/questionsPage/DoubleArrowRight";
import { VectorQuestions } from "@icons/questionsPage/VectorQuestions";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";

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

  useEffect(() => {
    if (listQuestions[quizId][totalIndex].deleteTimeoutId) {
      clearTimeout(listQuestions[quizId][totalIndex].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",
                  }}
                >
                  {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 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 = listQuestions[quizId][totalIndex].id;
            if (listQuestions[quizId][totalIndex].deleteTimeoutId) {
              clearTimeout(listQuestions[quizId][totalIndex].deleteTimeoutId);
            }

            removeQuestion(quizId, totalIndex);

            const newTimeoutId = window.setTimeout(() => {
              removeQuestionForce(quizId, removedId);
            }, 5000);

            updateQuestionsList(quizId, totalIndex, {
              ...listQuestions[quizId][totalIndex],
              deleteTimeoutId: newTimeoutId,
            });
          }}
        >
          <DeleteIcon color={"#4D4D4D"} />
        </IconButton>
      </Box>
    </Box>
  );
}