import { FC, useState } from "react";
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";

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

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

type RatingIconType =
  | "star"
  | "trophie"
  | "flag"
  | "heart"
  | "like"
  | "bubble"
  | "hashtag";

const ratingIconComponentByType: Record<
  RatingIconType,
  FC<{ color: string }>
> = {
  star: StarIconMini,
  trophie: TropfyIcon,
  flag: FlagIcon,
  heart: HeartIcon,
  like: LikeIcon,
  bubble: LightbulbIcon,
  hashtag: HashtagIcon,
};

interface Props {
  question: QuizQuestionRating;
}

export default function Rating({ question }: Props) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const [selectedRating, setSelectedRating] = useState<number>(0);

  console.log(question);

  const RatingIconComponent =
    ratingIconComponentByType[question.content.form as RatingIconType];

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        gap: 1,
      }}
    >
      <Typography variant="h6" data-cy="question-title">{question.title}</Typography>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          gap: 1,
          width: "fit-content",
        }}
      >
        <Box
          data-cy="rating"
          data-rating={selectedRating}
          sx={{
            display: "flex",
            gap: isMobile ? "10px" : "15px",
            flexWrap: "wrap",
          }}
        >
          {Array.from(
            { length: question.content.steps },
            (_, index) => index
          ).map((itemNumber) => (
            <Box
              key={itemNumber}
              onClick={() => setSelectedRating(itemNumber + 1)}
              data-cy="rating-button"
              sx={{
                cursor: "pointer",
                transform: "scale(1.5)",
                ":hover": {
                  transform: "scale(1.7)",
                  transition: "0.2s",
                },
              }}
            >
              <RatingIconComponent
                color={
                  selectedRating > itemNumber
                    ? theme.palette.brightPurple.main
                    : theme.palette.grey2.main
                }
              />
            </Box>
          ))}
        </Box>
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            gap: 2,
          }}
        >
          <Typography>{question.content.ratingNegativeDescription}</Typography>
          <Typography>{question.content.ratingPositiveDescription}</Typography>
        </Box>
      </Box>
    </Box>
  );
}
