frontAnswerer/lib/components/ViewPublicationPage/questions/Number.tsx

import { Box, Typography, useTheme } from "@mui/material";
import { useEffect, useState } from "react";
import { useDebouncedCallback } from "use-debounce";

import { CustomSlider } from "@ui_kit/CustomSlider";
import CustomTextField from "@ui_kit/CustomTextField";

import { sendAnswer } from "@api/quizRelase";
import { enqueueSnackbar } from "notistack";
import type { QuizQuestionNumber } from "../../../model/questionTypes/number";

import { useQuizData } from "@utils/hooks/useQuizData";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useQuizId } from "../../../contexts/QuizIdContext";
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
import { updateAnswer, useQuizViewStore } from "@stores/quizView";

type NumberProps = {
  currentQuestion: QuizQuestionNumber;
};

export const Number = ({ currentQuestion }: NumberProps) => {
  const qid = useQuizId();
  const { settings } = useQuizData();
  const [inputValue, setInputValue] = useState<string>("0");
  const [minRange, setMinRange] = useState<string>("0");
  const [maxRange, setMaxRange] = useState<string>("100000000000");
  const [reversedInputValue, setReversedInputValue] = useState<string>("0");
  const [reversedMinRange, setReversedMinRange] = useState<string>("0");
  const [reversedMaxRange, setReversedMaxRange] =
    useState<string>("100000000000");
  const theme = useTheme();
  const { answers } = useQuizViewStore();

  const isMobile = useRootContainerSize() < 650;
  const [minBorder, maxBorder] = currentQuestion.content.range
    .split("—")
    .map(window.Number);
  const min = minBorder < maxBorder ? minBorder : maxBorder;
  const max = minBorder < maxBorder ? maxBorder : minBorder;
  const reversed = minBorder > maxBorder;

  const sendAnswerToBackend = async (value: string, noUpdate = false) => {
    try {
      await sendAnswer({
        questionId: currentQuestion.id,
        body: value,
        qid,
      });

      if (!noUpdate) {
        updateAnswer(currentQuestion.id, value, 0);
      }
    } catch (e) {
      enqueueSnackbar("ответ не был засчитан");
    }
  };

  const updateValueDebounced = useDebouncedCallback(async (value: string) => {
    const newValue =
      window.Number(value) < window.Number(minRange)
        ? minRange
        : window.Number(value) > window.Number(maxRange)
        ? maxRange
        : value;

    setInputValue(newValue);
    await sendAnswerToBackend(newValue);
  }, 1000);
  const updateMinRangeDebounced = useDebouncedCallback(
    async (value: string, crowded = false) => {
      const newMinValue = crowded
        ? maxRange
        : window.Number(value.split("—")[0]) < min
        ? String(min)
        : value.split("—")[0];

      setMinRange(newMinValue);
      await sendAnswerToBackend(`${newMinValue}—${value.split("—")[1]}`);
    },
    1000
  );
  const updateMaxRangeDebounced = useDebouncedCallback(
    async (value: string, crowded = false) => {
      const newMaxValue = crowded
        ? minRange
        : window.Number(value.split("—")[1]) > max
        ? String(max)
        : value.split("—")[1];

      setMaxRange(newMaxValue);
      await sendAnswerToBackend(`${value.split("—")[0]}—${newMaxValue}`);
    },
    1000
  );
  const answer = answers.find(
    ({ questionId }) => questionId === currentQuestion.id
  )?.answer as string;

  const sliderValue = answer || currentQuestion.content.start + "—" + max;

  useEffect(() => {
    if (answer) {
      if (answer.includes("—")) {
        setMinRange(answer.split("—")[0]);
        setMaxRange(answer.split("—")[1]);
      } else {
        setInputValue(answer);
      }
    }

    if (!answer) {
      setMinRange(String(currentQuestion.content.start));
      setMaxRange(String(max));
      setInputValue(String(currentQuestion.content.start));
    }
  }, []);

  console.log(1111111111, reversedMinRange, reversedMaxRange);

  return (
    <Box>
      <Typography variant="h5" color={theme.palette.text.primary}>
        {currentQuestion.title}
      </Typography>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          width: "100%",
          marginTop: "20px",
          gap: "30px",
          paddingRight: isMobile ? "10px" : undefined,
        }}
      >
        <CustomSlider
          value={
            currentQuestion.content.chooseRange
              ? sliderValue.split("—").length || 0 > 1
                ? sliderValue.split("—").map((item) => window.Number(item))
                : [min, min + 1]
              : window.Number(sliderValue.split("—")[0])
          }
          min={min}
          max={max}
          step={currentQuestion.content.step || 1}
          onChange={(_, value) => {
            const range = Array.isArray(value)
              ? `${value[0]}—${value[1]}`
              : String(value);

            updateAnswer(currentQuestion.id, range, 0);
          }}
          onChangeCommitted={async (_, value) => {
            if (currentQuestion.content.chooseRange && Array.isArray(value)) {
              if (reversed) {
                const newMinReversedValue = String(max + min - value[0]);
                const newMaxReversedValue = String(max + min - value[1]);

                setMinRange(String(value[0]));
                setMaxRange(String(value[1]));
                setReversedMinRange(newMinReversedValue);
                setReversedMaxRange(newMaxReversedValue);
                await sendAnswerToBackend(
                  `${newMinReversedValue}—${newMaxReversedValue}`,
                  true
                );

                return;
              }

              setMinRange(String(value[0]));
              setMaxRange(String(value[1]));
              await sendAnswerToBackend(`${value[0]}—${value[1]}`);

              return;
            }

            setInputValue(String(value));
            await sendAnswerToBackend(String(value));
          }}
          valueLabelFormat={(value) => {
            if (!reversed) {
              return value;
            }

            const [minSliderBorder, maxSliderBorder] = sliderValue
              .split("—")
              .map(window.Number);

            if (value === minSliderBorder) {
              return max + min - minSliderBorder;
            }

            return max + min - maxSliderBorder;
          }}
          //@ts-ignore
          sx={{
            color: theme.palette.primary.main,
            "& .MuiSlider-valueLabel": {
              background: theme.palette.primary.main,
            },
          }}
        />

        {!currentQuestion.content.chooseRange && (
          <CustomTextField
            placeholder="0"
            value={inputValue}
            onChange={({ target }) => {
              const value = target.value.replace(/\D/g, "");
              setInputValue(value);
              updateValueDebounced(value);
            }}
            sx={{
              maxWidth: "80px",
              borderColor: theme.palette.text.primary,
              "& .MuiInputBase-input": {
                textAlign: "center",
                backgroundColor: quizThemes[settings.cfg.theme].isLight
                  ? "white"
                  : theme.palette.background.default,
              },
            }}
          />
        )}

        {currentQuestion.content.chooseRange && (
          <Box
            sx={{
              display: "flex",
              gap: "15px",
              alignItems: "center",
              "& .MuiFormControl-root": { width: "auto" },
            }}
          >
            <CustomTextField
              placeholder="0"
              value={reversed ? String(reversedMinRange) : minRange}
              onChange={({ target }) => {
                const newValue = target.value.replace(/\D/g, "");
                setMinRange(newValue);

                if (window.Number(newValue) >= window.Number(maxRange)) {
                  updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);

                  return;
                }

                updateMinRangeDebounced(`${newValue}—${maxRange}`);
              }}
              sx={{
                maxWidth: "80px",
                borderColor: theme.palette.text.primary,
                "& .MuiInputBase-input": {
                  textAlign: "center",
                  backgroundColor: quizThemes[settings.cfg.theme].isLight
                    ? "white"
                    : theme.palette.background.default,
                },
              }}
            />
            <Typography color={theme.palette.text.primary}>до</Typography>
            <CustomTextField
              placeholder="0"
              value={reversed ? String(reversedMaxRange) : maxRange}
              onChange={({ target }) => {
                const newValue = target.value.replace(/\D/g, "");
                setMaxRange(newValue);

                if (window.Number(newValue) <= window.Number(minRange)) {
                  updateMaxRangeDebounced(`${minRange}—${minRange}`, true);

                  return;
                }

                updateMaxRangeDebounced(`${minRange}—${newValue}`);
              }}
              sx={{
                maxWidth: "80px",
                borderColor: theme.palette.text.primary,
                "& .MuiInputBase-input": {
                  textAlign: "center",
                  backgroundColor: quizThemes[settings.cfg.theme].isLight
                    ? "white"
                    : theme.palette.background.default,
                },
              }}
            />
          </Box>
        )}
      </Box>
    </Box>
  );
};