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

import { useState, useEffect } from "react";
import { Box, Typography, useMediaQuery, 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/store";

import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
import { enqueueSnackbar } from "notistack";
import { sendAnswer } from "@api/quizRelase";
import { useQuestionsStore } from "@root/quizData/store"
import { modes } from "../../../utils/themes/Publication/themePublication";

type NumberProps = {
  currentQuestion: QuizQuestionNumber;
};

export const Number = ({ currentQuestion }: NumberProps) => {
  const { settings } = useQuestionsStore()
  const [minRange, setMinRange] = useState<string>("0");
  const [maxRange, setMaxRange] = useState<string>("100000000000");
  const theme = useTheme();
  const { answers } = useQuizViewStore();

  const isMobile = useMediaQuery(theme.breakpoints.down(650));


  const updateMinRangeDebounced = useDebouncedCallback(async (value, crowded = false) => {
    if (crowded) {
      setMinRange(maxRange);
    }

    try {

      await sendAnswer({
        questionId: currentQuestion.id,
        body: value,
        //@ts-ignore
        qid: settings.qid
      })

      updateAnswer(currentQuestion.id, value);

    } catch (e) {
      enqueueSnackbar("ответ не был засчитан")
    }


  }, 1000);
  const updateMaxRangeDebounced = useDebouncedCallback(async (value, crowded = false) => {
    if (crowded) {
      setMaxRange(minRange);
    }
    try {

      await sendAnswer({
        questionId: currentQuestion.id,
        body: value,
        //@ts-ignore
        qid: settings.qid
      })

      updateAnswer(currentQuestion.id, value);

    } catch (e) {
      enqueueSnackbar("ответ не был засчитан")
    }

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

  const mode = modes;
  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" 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={async (_, value) => {



            const range = String(value).replace(",", "—").replace (/\D/, '');


            updateAnswer(currentQuestion.id, range);
            updateMinRangeDebounced(range, true);

          }}
          onChangeCommitted={(_, value) => {
            if (currentQuestion.content.chooseRange) {
              const range = value as number[];

              setMinRange(String(range[0]));
              setMaxRange(String(range[1]));
            }
          }}
          //@ts-ignore
          sx={{
            color: theme.palette.primary.main,
            "& .MuiSlider-valueLabel": {
              background: theme.palette.primary.main,
            }
          }}
        />

        {!currentQuestion.content.chooseRange && (
          <CustomTextField
            placeholder="0"
            value={answer}
            onChange={async ({ target }) => {
              updateMinRangeDebounced(window.Number(target.value.replace (/\D/, '')) > max
                ? String(max)
                : window.Number(target.value) < min
                  ? String(min)
                  : target.value, true);
            }}
            sx={{
              maxWidth: "80px",
              borderColor: theme.palette.text.primary,
              "& .MuiInputBase-input": {
                textAlign: "center",
                backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default,
              },
            }}
          />
        )}

        {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.replace (/\D/, ''));

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

                  return;
                }

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

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

                  return;
                }

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

};