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

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

import TropfyIcon from "@icons/questionsPage/tropfyIcon";
import FlagIcon from "@icons/questionsPage/FlagIcon";
import HeartIcon from "@icons/questionsPage/heartIcon";
import LikeIcon from "@icons/questionsPage/likeIcon";
import LightbulbIcon from "@icons/questionsPage/lightbulbIcon";
import HashtagIcon from "@icons/questionsPage/hashtagIcon";
import StarIconMini from "@icons/questionsPage/StarIconMini";

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

type RatingProps = {
  currentQuestion: QuizQuestionRating;
};

const buttonRatingForm = [
  {
    name: "star",
    icon: (color: string) => <StarIconMini width={50} color={color} />,
  },
  {
    name: "trophie",
    icon: (color: string) => <TropfyIcon color={color} />,
  },
  {
    name: "flag",
    icon: (color: string) => <FlagIcon color={color} />,
  },
  {
    name: "heart",
    icon: (color: string) => <HeartIcon color={color} />,
  },
  {
    name: "like",
    icon: (color: string) => <LikeIcon color={color} />,
  },
  {
    name: "bubble",
    icon: (color: string) => <LightbulbIcon color={color} />,
  },
  {
    name: "hashtag",
    icon: (color: string) => <HashtagIcon color={color} />,
  },
];

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

  return (
    <Box>
      <Typography variant="h5">{currentQuestion.title}</Typography>
      <Box
        sx={{
          display: "inline-flex",
          alignItems: "center",
          gap: "20px",
          marginTop: "20px",
        }}
      >
        <Typography sx={{ color: theme.palette.grey2.main }}>
          {currentQuestion.content.ratingNegativeDescription}
        </Typography>
        <Box
          sx={{
            display: "inline-block",
            width: "100%",
          }}
        >
          <RatingComponent
            value={Number(answer || 0)}
            onChange={(_, value) =>
              updateAnswer(currentQuestion.id, String(value))
            }
            sx={{ height: "50px", gap: "15px" }}
            max={currentQuestion.content.steps}
            icon={form?.icon(theme.palette.brightPurple.main)}
            emptyIcon={form?.icon(theme.palette.grey2.main)}
          />
        </Box>
        <Typography sx={{ color: theme.palette.grey2.main }}>
          {currentQuestion.content.ratingPositiveDescription}
        </Typography>
      </Box>
    </Box>
  );
};