frontAnswerer/src/pages/ViewPublicationPage/questions/Number.tsx

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

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

import { useQuizViewStore, updateAnswer } from "@root/quizView";

import type { QuizQuestionNumber } from "../../../model/questionTypes/number";

type NumberProps = {
  currentQuestion: QuizQuestionNumber;
};

export const Number = ({ currentQuestion }: NumberProps) => {
  const [minRange, setMinRange] = useState<string>("0");
  const [maxRange, setMaxRange] = useState<string>("100000000000");
  const theme = useTheme();
  const { answers } = useQuizViewStore();
  const updateMinRangeDebounced = useDebouncedCallback((value, crowded = false) => {
    if (crowded) {
      setMinRange(maxRange);
    }

    updateAnswer(currentQuestion.content.id, value);
  }, 1000);
  const updateMaxRangeDebounced = useDebouncedCallback((value, crowded = false) => {
    if (crowded) {
      setMaxRange(minRange);
    }

    updateAnswer(currentQuestion.content.id, value);
  }, 1000);
  const answer = answers.find(({ questionId }) => questionId === currentQuestion.content.id)?.answer as string;

  const min = window.Number(currentQuestion.content.range.split("—")[0]);
  const max = window.Number(currentQuestion.content.range.split("—")[1]);
  const sliderValue = answer || currentQuestion.content.start + "—" + max;

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

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

  return (
    <Box>
      <Typography variant="h5">{currentQuestion.title}</Typography>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          width: "100%",
          marginTop: "20px",
          gap: "30px",
        }}
      >
        <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 = String(value).replace(",", "—");
            updateAnswer(currentQuestion.content.id, range);
          }}
          onChangeCommitted={(_, value) => {
            if (currentQuestion.content.chooseRange) {
              const range = value as number[];

              setMinRange(String(range[0]));
              setMaxRange(String(range[1]));
            }
          }}
        />

        {!currentQuestion.content.chooseRange && (
          <CustomTextField
            placeholder="0"
            value={answer}
            onChange={({ target }) => {
              updateAnswer(
                currentQuestion.content.id,
                window.Number(target.value) > max
                  ? String(max)
                  : window.Number(target.value) < min
                  ? String(min)
                  : target.value
              );
            }}
            sx={{
              maxWidth: "80px",
              "& .MuiInputBase-input": { textAlign: "center" },
            }}
          />
        )}

        {currentQuestion.content.chooseRange && (
          <Box
            sx={{
              display: "flex",
              gap: "15px",
              alignItems: "center",
              "& .MuiFormControl-root": { width: "auto" },
            }}
          >
            <CustomTextField
              placeholder="0"
              value={minRange}
              onChange={({ target }) => {
                setMinRange(target.value);

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

                  return;
                }

                updateMinRangeDebounced(`${target.value}—${maxRange}`);
              }}
              sx={{
                maxWidth: "80px",
                "& .MuiInputBase-input": { textAlign: "center" },
              }}
            />
            <Typography>до</Typography>
            <CustomTextField
              placeholder="0"
              value={maxRange}
              onChange={({ target }) => {
                setMaxRange(target.value);

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

                  return;
                }

                updateMaxRangeDebounced(`${minRange}—${target.value}`);
              }}
              sx={{
                maxWidth: "80px",
                "& .MuiInputBase-input": { textAlign: "center" },
              }}
            />
          </Box>
        )}
      </Box>
    </Box>
  );
};