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>
  );
};