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

import { sendAnswer } from "@api/quizRelase";
import { useQuizViewStore } from "@stores/quizView";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizData } from "@contexts/QuizDataContext";

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";

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 [isSending, setIsSending] = useState<boolean>(false);
  const { quizId, preview } = useQuizData();
  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) => {
    setIsSending(true);

    try {
      await sendAnswer({
        questionId: currentQuestion.id,
        body: String(value) + " из " + currentQuestion.content.steps,
        qid: quizId,
        preview,
      });

      updateAnswer(currentQuestion.id, String(value), 0);
    } catch (error) {
      enqueueSnackbar("ответ не был засчитан");
    }

    setIsSending(false);
  };

  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
            disabled={isSending}
            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>
  );
};