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",
        }}
      >
        {!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>
        )}
        <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: "25px",
          }}
          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]));
            }
          }}
        />
      </Box>
    </Box>
  );
};