import { useEffect } from "react";
import { Box, Typography, Slider, useTheme } from "@mui/material";

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 theme = useTheme();
  const { answers } = useQuizViewStore();
  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(() => {
    if (!answer) {
      updateAnswer(
        currentQuestion.content.id,
        currentQuestion.content.chooseRange
          ? `${currentQuestion.content.start}—${max}`
          : String(currentQuestion.content.start),
        false
      );
    }
  }, [answer]);

  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={
              currentQuestion.content.chooseRange
                ? answer?.split("—")[0]
                : 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={
                currentQuestion.content.chooseRange
                  ? answer?.split("—")[0]
                  : answer
              }
              onChange={({ target }) => {
                updateAnswer(
                  currentQuestion.content.id,
                  window.Number(target.value) >
                    window.Number(answer?.split("—")[1])
                    ? `${answer?.split("—")[1]}—${answer?.split("—")[1]}`
                    : window.Number(target.value) < min
                    ? `${min}—${answer?.split("—")[1]}`
                    : `${target.value}—${answer?.split("—")[1]}`
                );
              }}
              sx={{
                maxWidth: "80px",
                "& .MuiInputBase-input": { textAlign: "center" },
              }}
            />
            <CustomTextField
              placeholder="0"
              value={answer?.split("—")[1]}
              onChange={({ target }) => {
                updateAnswer(
                  currentQuestion.content.id,
                  window.Number(target.value) > max
                    ? `${answer?.split("—")[0]}—${max}`
                    : window.Number(target.value) <
                      window.Number(answer?.split("—")[0])
                    ? `${answer?.split("—")[0]}—${answer?.split("—")[0]}`
                    : `${answer?.split("—")[0]}—${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) => {
            updateAnswer(
              currentQuestion.content.id,
              String(value).replace(",", "—")
            );
          }}
        />
      </Box>
    </Box>
  );
};