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 = {
  currentQuestion: QuizQuestionRating;
};

export const Rating = ({ currentQuestion }: RatingProps) => {
  const { answers } = useQuizViewStore();
  const theme = useTheme();
  const { answer } =
    answers.find(
      ({ questionId }) => questionId === currentQuestion.content.id
    ) ?? {};

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