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

import { useQuizViewStore, updateAnswer } from "@stores/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";
import { enqueueSnackbar } from "notistack";
import { sendAnswer } from "@api/quizRelase";
import { useQuestionsStore } from "@stores/quizData/store";

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 { settings } = useQuestionsStore()
  const { answers } = useQuizViewStore();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(650));
  const { answer } =
    answers.find(
      ({ questionId }) => questionId === currentQuestion.id
    ) ?? {};
  const form = buttonRatingForm.find(
    ({ name }) => name === currentQuestion.content.form
  );

  if (!settings) throw new Error("settings is null");

  return (
    <Box>
      <Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
      <Box
        sx={{
          display: "inline-flex",
          alignItems: "center",
          gap: "20px",
          marginTop: "20px",
          flexDirection: "column",
          width: isMobile ? "100%" : undefined,
        }}
      >
        <Box
          sx={{
            display: "inline-block",
            width: "100%",
          }}
        >
          <RatingComponent
            value={Number(answer || 0)}
            onChange={async (_, value) => {


              try {

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

                updateAnswer(currentQuestion.id, String(value))

              } catch (e) {
                enqueueSnackbar("ответ не был засчитан")
              }
            }}
            sx={{
              height: "50px",
              gap: isMobile ? undefined : "15px",
              justifyContent: isMobile ? "space-between" : undefined,
              width: isMobile ? "100%" : undefined
            }}
            max={currentQuestion.content.steps}
            icon={form?.icon(theme.palette.primary.main)}
            emptyIcon={form?.icon("#9A9AAF")}
          />
        </Box>
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            gap: 2,
            width: "100%",
          }}
        >
          <Typography sx={{
            color: "#9A9AAF"
            // color: theme.palette.grey2.main
          }}>
            {currentQuestion.content.ratingNegativeDescription}
          </Typography>
          <Typography sx={{ color: "#9A9AAF" }}>
            {currentQuestion.content.ratingPositiveDescription}
          </Typography>
        </Box>
      </Box>
    </Box>
  );

};