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 "@stores/quizView/store";

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

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 (!settings) return null;
        
        if (crowded) {
            setMinRange(maxRange);
        }

        try {

            await sendAnswer({
                questionId: currentQuestion.id,
                body: value,
                qid: settings.qid
            })

            updateAnswer(currentQuestion.id, value);

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


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

            await sendAnswer({
                questionId: currentQuestion.id,
                body: value,
                qid: settings.qid
            })

            updateAnswer(currentQuestion.id, value);

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

    }, 1000);
    const answer = answers.find(({ questionId }) => questionId === currentQuestion.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));
        }
    }, []);

    if (!settings) throw new Error("settings is null");

    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]));
                        }
                    }}
                    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: 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={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: quizThemes[settings.cfg.theme].isLight ? "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: quizThemes[settings.cfg.theme].isLight ? "white" : theme.palette.background.default,
                                },
                            }}
                        />
                    </Box>
                )}
            </Box>
        </Box>
    );

};