import { useState } from "react";
import { useParams } from "react-router-dom";
import { Box, Typography, Slider, useTheme } from "@mui/material";

import CustomTextField from "@ui_kit/CustomTextField";

import { questionStore, updateQuestionsList } from "@root/questions";

import type { QuizQuestionNumber } from "../../../model/questionTypes/number";

type NumberProps = {
  question: QuizQuestionNumber;
};

export const Number = ({ question }: NumberProps) => {
  const [value, setValue] = useState<number>(0);
  const quizId = window.Number(useParams().quizId);
  const { listQuestions } = questionStore();
  const theme = useTheme();
  const totalIndex = listQuestions[quizId].findIndex(
    ({ id }) => question.id === id
  );

  return (
    <Box>
      <Typography variant="h5">{question.title}</Typography>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          width: "100%",
          marginTop: "20px",
        }}
      >
        <CustomTextField
          placeholder="0"
          value={String(value)}
          sx={{
            maxWidth: "80px",
            "& .MuiInputBase-input": {
              textAlign: "center",
            },
          }}
        />
        <Slider
          value={value}
          min={window.Number(question.content.range.split("—")[0])}
          max={window.Number(question.content.range.split("—")[1])}
          sx={{
            color: theme.palette.brightPurple.main,
            padding: "0",
            marginTop: "25px",
          }}
          onChange={(_, value) => {
            setValue(value as number);
          }}
        />
      </Box>
    </Box>
  );
};