frontPanel/src/pages/Questions/SliderOptions/SliderOptions.tsx

import { useState } from "react";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
import ButtonsOptions from "../ButtonsOptions";
import CustomNumberField from "@ui_kit/CustomNumberField";
import SwitchSlider from "./switchSlider";
import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
import { updateQuestion } from "@root/questions/actions";


interface Props {
    question: QuizQuestionNumber;
}

export default function SliderOptions({ question }: Props) {
    const theme = useTheme();
    const isTablet = useMediaQuery(theme.breakpoints.down(980));
    const isMobile = useMediaQuery(theme.breakpoints.down(790));
    const [switchState, setSwitchState] = useState("setting");
    const [stepError, setStepError] = useState("");

    const SSHC = (data: string) => {
        setSwitchState(data);
    };

    return (
        <>
            <Box
                sx={{
                    width: isTablet ? "auto" : "100%",
                    maxWidth: "673.8px",
                    display: "flex",
                    pl: "20px",
                    pr: isMobile ? "13px" : "20px",
                    pb: isMobile ? "30px" : "20px",
                    flexDirection: "column",
                    gap: isMobile ? "25px" : "20px",
                }}
            >
                <Box
                    sx={{
                        gap: isMobile ? "10px" : "14px",
                        mt: isMobile ? "25px" : "0px",
                        display: "flex",
                        flexDirection: "column",
                        marginRight: isMobile ? "10px" : "0px",
                    }}
                >
                    <Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D" }}>
                        Выбор значения из диапазона
                    </Typography>
                    <Box sx={{ width: "100%", display: "flex", alignItems: "center", gap: isMobile ? "9px" : "20px" }}>
                        <CustomNumberField
                            sx={{ maxWidth: "310px", width: "100%" }}
                            placeholder={"0"}
                            min={0}
                            max={99}
                            value={question.content.range.split("—")[0]}
                            onChange={({ target }) => {
                                updateQuestion(question.id, question => {
                                    if (question.type !== "number") return;

                                    question.content.range = `${target.value}—${question.content.range.split("—")[1]}`;
                                });
                            }}
                            onBlur={({ target }) => {
                                const start = question.content.start;
                                const min = Number(target.value);
                                const max = Number(question.content.range.split("—")[1]);

                                if (min >= max) {
                                    updateQuestion(question.id, question => {
                                        if (question.type !== "number") return;

                                        question.content.range = `${max - 1 >= 0 ? max - 1 : 0}—${question.content.range.split("—")[1]}`;
                                    });
                                }

                                if (start < min) {
                                    updateQuestion(question.id, question => {
                                        if (question.type !== "number") return;

                                        question.content.start = min;
                                    });
                                }
                            }}
                        />
                        <Typography>—</Typography>
                        <CustomNumberField
                            sx={{ maxWidth: "310px", width: "100%" }}
                            placeholder={"100"}
                            min={0}
                            max={100}
                            value={question.content.range.split("—")[1]}
                            onChange={({ target }) => {
                                updateQuestion(question.id, question => {
                                    if (question.type !== "number") return;

                                    question.content.range = `${question.content.range.split("—")[0]}—${target.value}`;
                                });
                            }}
                            onBlur={({ target }) => {
                                const start = question.content.start;
                                const step = question.content.step;
                                const min = Number(question.content.range.split("—")[0]);
                                const max = Number(target.value);
                                const range = max - min;

                                if (max <= min) {
                                    updateQuestion(question.id, question => {
                                        if (question.type !== "number") return;

                                        question.content.range = `${min}—${min + 1 >= 100 ? 100 : min + 1}`;
                                    });
                                }

                                if (start > max) {
                                    updateQuestion(question.id, question => {
                                        if (question.type !== "number") return;

                                        question.content.start = max;
                                    });
                                }

                                if (step > max) {
                                    updateQuestion(question.id, question => {
                                        if (question.type !== "number") return;

                                        question.content.step = min;
                                    });

                                    if (range % step) {
                                        setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
                                    } else {
                                        setStepError("");
                                    }
                                }
                            }}
                        />
                    </Box>
                </Box>
                <Box
                    sx={{
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                        flexDirection: isMobile ? "column-reverse" : "",
                        gap: isMobile ? "15px" : "50px",
                    }}
                >
                    <Box sx={{ width: "100%" }}>
                        <Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: isMobile ? "10px" : "14px" }}>
                            Начальное значение
                        </Typography>
                        <CustomNumberField
                            sx={{ maxWidth: "310px", width: "100%" }}
                            placeholder={"50"}
                            min={Number(question.content.range.split("—")[0])}
                            max={Number(question.content.range.split("—")[1])}
                            value={String(question.content.start)}
                            onChange={({ target }) => {
                                updateQuestion(question.id, question => {
                                    if (question.type !== "number") return;

                                    question.content.start = Number(target.value);
                                });
                            }}
                        />
                    </Box>
                    <Box sx={{ width: "100%" }}>
                        <Typography
                            sx={{
                                fontWeight: "500",
                                fontSize: "18px",
                                color: "#4D4D4D",
                                mb: "10px",
                            }}
                        >
                            Шаг
                        </Typography>
                        <CustomNumberField
                            sx={{ maxWidth: "310px", width: "100%" }}
                            min={0}
                            max={100}
                            placeholder={"1"}
                            error={stepError}
                            value={String(question.content.step)}
                            onChange={({ target }) => {
                                updateQuestion(question.id, question => {
                                    if (question.type !== "number") return;

                                    question.content.step = Number(target.value);
                                });
                            }}
                            onBlur={({ target }) => {
                                const min = Number(question.content.range.split("—")[0]);
                                const max = Number(question.content.range.split("—")[1]);
                                const range = max - min;
                                const step = Number(target.value);

                                if (step > max) {
                                    updateQuestion(question.id, question => {
                                        if (question.type !== "number") return;

                                        question.content.step = max;
                                    });
                                }

                                if (range % step) {
                                    setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
                                } else {
                                    setStepError("");
                                }
                            }}
                        />
                    </Box>
                </Box>
            </Box>
            <ButtonsOptions switchState={switchState} SSHC={SSHC} question={question} />
            <SwitchSlider switchState={switchState} question={question} />
        </>
    );
}