import {
  Box,
  Typography,
  Rating as RatingComponent,
  useTheme,
} from "@mui/material";

import { useQuizViewStore, updateAnswer } from "@root/quizView";

import StarIconMini from "@icons/questionsPage/StarIconMini";

import type { QuizQuestionRating } from "../../../model/questionTypes/rating";

type RatingProps = {
  stepNumber: number;
  question: QuizQuestionRating;
};

export const Rating = ({ stepNumber, question }: RatingProps) => {
  const { answers } = useQuizViewStore();
  const theme = useTheme();
  const { answer } = answers.find(({ step }) => step === stepNumber) ?? {};

  return (
    <Box>
      <Typography variant="h5">{question.title}</Typography>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          width: "100%",
          marginTop: "20px",
        }}
      >
        <RatingComponent
          value={Number(answer || 0)}
          onChange={(_, value) => updateAnswer(stepNumber, String(value))}
          sx={{ height: "50px" }}
          max={question.content.steps}
          icon={
            <StarIconMini
              color={theme.palette.brightPurple.main}
              width={50}
              sx={{ transform: "scale(0.8)" }}
            />
          }
          emptyIcon={
            <StarIconMini
              color={theme.palette.grey2.main}
              width={50}
              sx={{ transform: "scale(0.8)" }}
            />
          }
        />
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            maxWidth: `${question.content.steps * 50}px`,
            color: theme.palette.grey2.main,
          }}
        >
          <Typography>{question.content.ratingNegativeDescription}</Typography>
          <Typography>{question.content.ratingPositiveDescription}</Typography>
        </Box>
      </Box>
    </Box>
  );
};