import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
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";
import { Box, Rating as RatingComponent, Typography, useTheme } from "@mui/material";
import { useQuizViewStore } from "@stores/quizView";

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

type RatingProps = {
  currentQuestion: QuizQuestionRating;
};

export const Rating = ({ currentQuestion }: RatingProps) => {
  const { updateAnswer } = useQuizViewStore((state) => state);
  const answers = useQuizViewStore((state) => state.answers);
  const theme = useTheme();
  const isMobile = useRootContainerSize() < 650;
  const isTablet = useRootContainerSize() < 750;

  const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
  const form = RATING_FORM_BUTTONS.find(({ name }) => name === currentQuestion.content.form);

  const sendRating = async (value: number | null) => {
    updateAnswer(currentQuestion.id, String(value), 0);
  };

  return (
    <Box>
      <Typography
        variant="h5"
        color={theme.palette.text.primary}
        sx={{ wordBreak: "break-word" }}
      >
        {currentQuestion.title}
      </Typography>
      <Box
        sx={{
          display: "inline-flex",
          alignItems: "center",
          gap: "20px",
          marginTop: "20px",
          flexDirection: "column",
        }}
      >
        <Box sx={{ display: "inline-block", width: "100%" }}>
          <RatingComponent
            value={Number(answer || 0)}
            onChange={(_, value) => sendRating(value)}
            sx={{
              height: "50px",
              opacity: "1!important",
              "& .MuiRating-root.Mui-disabled": { opacity: "1!important" },
              "& .MuiRating-icon": { mr: isMobile ? undefined : "15px" },
            }}
            max={currentQuestion.content.steps}
            icon={form?.icon(theme.palette.primary.main, isMobile ? 30 : isTablet ? 40 : 50)}
            emptyIcon={form?.icon("#9A9AAF", isMobile ? 30 : isTablet ? 40 : 50)}
          />
        </Box>
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            gap: 2,
            width: "100%",
          }}
        >
          <Typography sx={{ color: "#9A9AAF" }}>{currentQuestion.content.ratingNegativeDescription}</Typography>
          <Typography sx={{ color: "#9A9AAF" }}>{currentQuestion.content.ratingPositiveDescription}</Typography>
        </Box>
      </Box>
    </Box>
  );
};