frontPanel/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 { 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>("100");
  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
    ) ?? {};

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

  useEffect(() => {
    console.log("ans", currentQuestion.content.start);
    if (answer) {
      setMinRange(answer.split("—")[0]);
      setMaxRange(answer.split("—")[1]);
    }
    if (!answer) {
      updateAnswer(
        currentQuestion.content.id,
        currentQuestion.content.chooseRange
          ? `${currentQuestion.content.start}—${max}`
          : String(currentQuestion.content.start),
        false
      );

      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",
        }}
      >

<Slider
          value={
            currentQuestion.content.chooseRange
              ? answer?.split("—").length || 0 > 1
                ? answer?.split("—").map((item) => window.Number(item))
                : [min, min + 1]
              : window.Number(answer || 1)
          }
          min={min}
          max={max}
          step={currentQuestion.content.step || 1}
          sx={{
            color: theme.palette.brightPurple.main,
            padding: "0",
            marginTop: "75px",
            "& .MuiSlider-valueLabel":{
                background: theme.palette.brightPurple.main,
                borderRadius: "8px",
                width: "60px",
                height: "36px"
            },
            "& .MuiSlider-valueLabel::before": {
                width: "6px",
                height: "2px",
                transform: "translate(-50%, 50%) rotate(90deg)",
                bottom: "-5px"
            },
              "& .MuiSlider-rail": {
                  backgroundColor: "#F2F3F7",
                  border: `1px solid #9A9AAF`,
                  height: "12px"
              },
              "& .MuiSlider-thumb": {
                  border: "3px #f2f3f7 solid",
                  height: "23px",
                  width: "23px"
              },
              "& .MuiSlider-track": {
                height: "12px"
              }
          }}
          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",
              "& .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" },
              }}
            />

            до
            
            <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>
  );
};