frontPanel/src/pages/Questions/RatingOptions/RatingOptions.tsx

import { useState, useEffect, useRef } from "react";
import { useParams } from "react-router-dom";
import {
  Box,
  Typography,
  TextField,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useDebouncedCallback } from "use-debounce";
import { questionStore, updateQuestionsList } from "@root/questions";
import ButtonsOptions from "../ButtonsOptions";
import SwitchRating from "./switchRating";

import TropfyIcon from "../../../assets/icons/questionsPage/tropfyIcon";
import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon";
import HeartIcon from "../../../assets/icons/questionsPage/heartIcon";
import LikeIcon from "../../../assets/icons/questionsPage/likeIcon";
import LightbulbIcon from "../../../assets/icons/questionsPage/lightbulbIcon";
import HashtagIcon from "../../../assets/icons/questionsPage/hashtagIcon";
import StarIconMini from "../../../assets/icons/questionsPage/StarIconMini";

interface Props {
  totalIndex: number;
}

export type ButtonRatingFrom = {
  name: string;
  icon: JSX.Element;
};

export default function RatingOptions({ totalIndex }: Props) {
  const [switchState, setSwitchState] = useState("setting");
  const [negativeText, setNegativeText] = useState<string>("");
  const [positiveText, setPositiveText] = useState<string>("");
  const [negativeTextWidth, setNegativeTextWidth] = useState<number>(0);
  const [positiveTextWidth, setPositiveTextWidth] = useState<number>(0);
  const quizId = Number(useParams().quizId);
  const { listQuestions } = questionStore();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const negativeRef = useRef<HTMLDivElement>(null);
  const positiveRef = useRef<HTMLDivElement>(null);
  const debounceNegativeDescription = useDebouncedCallback((value) => {
    updateQuestionsList(quizId, totalIndex, {
      content: {
        ...listQuestions[quizId][totalIndex].content,
        ratingNegativeDescription: value.substring(0, 15),
      },
    });
  }, 500);
  const debouncePositiveDescription = useDebouncedCallback((value) => {
    updateQuestionsList(quizId, totalIndex, {
      content: {
        ...listQuestions[quizId][totalIndex].content,
        ratingPositiveDescription: value.substring(0, 15),
      },
    });
  }, 500);

  useEffect(() => {
    setNegativeText(
      listQuestions[quizId][totalIndex].content.ratingNegativeDescription
    );
    setPositiveText(
      listQuestions[quizId][totalIndex].content.ratingPositiveDescription
    );
  }, []);

  useEffect(() => {
    setNegativeTextWidth(negativeRef.current?.offsetWidth || 0);
  }, [negativeText]);

  useEffect(() => {
    setPositiveTextWidth(positiveRef.current?.offsetWidth || 0);
  }, [positiveText]);

  const buttonRatingForm: ButtonRatingFrom[] = [
    { name: "star", icon: <StarIconMini width={"50px"} color={theme.palette.grey2.main} /> },
    { name: "trophie", icon: <TropfyIcon color={theme.palette.grey2.main} /> },
    { name: "flag", icon: <FlagIcon color={theme.palette.grey2.main} /> },
    { name: "heart", icon: <HeartIcon color={theme.palette.grey2.main} /> },
    { name: "like", icon: <LikeIcon color={theme.palette.grey2.main} /> },
    {
      name: "bubble",
      icon: <LightbulbIcon color={theme.palette.grey2.main} />,
    },
    { name: "hashtag", icon: <HashtagIcon color={theme.palette.grey2.main} /> },
  ];

  const SSHC = (data: string) => {
    setSwitchState(data);
  };

  return (
    <>
      <Box
        sx={{
          width: isMobile
            ? "auto"
            : `${
                listQuestions[quizId][totalIndex].content.steps * 44 >
                negativeTextWidth + positiveTextWidth
                  ? listQuestions[quizId][totalIndex].content.steps * 44
                  : negativeTextWidth + positiveTextWidth + 20
              }px`,
          minWidth: "300px",
          maxWidth: "440px",
          display: "flex",
          px: "20px",
          flexDirection: "column",
          gap: "20px",
        }}
      >
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            padding: "0 10px",
            gap: isMobile ? "10px" : "15px",
          }}
        >
          {Array.from(
            { length: listQuestions[quizId][totalIndex].content.steps },
            (_, index) => index
          ).map((itemNumber) => (
            <Box key={itemNumber} sx={{ transform: "scale(1.5)" }}>
              {
                buttonRatingForm.find(
                  ({ name }) =>
                    listQuestions[quizId][totalIndex].content.form === name
                )?.icon
              }
            </Box>
          ))}
        </Box>
        <Box
          sx={{
            mb: "20px",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            maxWidth: isMobile ? "303px" : "290px",
            width: "100%",
          }}
        >
          <Typography
            ref={negativeRef}
            sx={{
              position: "absolute",
              opacity: 0,
              zIndex: "-100",
              whiteSpace: "nowrap",
              fontSize: "16px",
            }}
          >
            {negativeText}
          </Typography>
          <TextField
            defaultValue={
              listQuestions[quizId][totalIndex].content
                .ratingNegativeDescription
            }
            value={negativeText}
            placeholder="Негативно"
            onChange={({ target }) => {
              if (target.value.length <= 15) {
                setNegativeText(target.value);
                debounceNegativeDescription(target.value);
              }
            }}
            onBlur={({ target }) => debounceNegativeDescription(target.value)}
            sx={{
              width: negativeTextWidth + 10 + "px",
              background: "transparent",
              fontSize: "18px",
              minWidth: "95px",
              maxWidth: "230px",
              transition: "0.2s",
              "& .MuiInputBase-root": {
                "& .MuiInputBase-input": {
                  color: theme.palette.grey2.main,
                  fontSize: "16px",
                  padding: "0 3px",
                  borderRadius: "3px",
                  border: "1px solid",
                  borderColor: "transparent",
                  "&:hover, &:focus": {
                    borderColor: theme.palette.grey2.main,
                  },
                },
                "& .MuiOutlinedInput-notchedOutline": {
                  outline: "none",
                  border: "none",
                },
              },
            }}
          />
          <Typography
            ref={positiveRef}
            sx={{
              position: "absolute",
              opacity: 0,
              zIndex: "-100",
              whiteSpace: "nowrap",
              fontSize: "16px",
            }}
          >
            {positiveText}
          </Typography>
          <TextField
            value={positiveText}
            placeholder="Позитивно"
            onChange={({ target }) => {
              if (target.value.length <= 15) {
                setPositiveText(target.value);
                debouncePositiveDescription(target.value);
              }
            }}
            onBlur={({ target }) => debouncePositiveDescription(target.value)}
            sx={{
              width: positiveTextWidth + 10 + "px",
              background: "transparent",
              fontSize: "18px",
              minWidth: "95px",
              maxWidth: "230px",
              transition: "0.2s",
              "& .MuiInputBase-root": {
                "& .MuiInputBase-input": {
                  color: theme.palette.grey2.main,
                  fontSize: "16px",
                  padding: "0 3px",
                  borderRadius: "3px",
                  border: "1px solid",
                  borderColor: "transparent",
                  "&:hover, &:focus": {
                    borderColor: theme.palette.grey2.main,
                  },
                },
                "& .MuiOutlinedInput-notchedOutline": {
                  outline: "none",
                  border: "none",
                },
              },
            }}
          />
        </Box>
      </Box>
      <ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
      <SwitchRating switchState={switchState} totalIndex={totalIndex} />
    </>
  );
}