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

import { updateAnswer, useQuizViewStore } from "@stores/quizView";

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 { sendAnswer } from "@api/quizRelase";
import { enqueueSnackbar } from "notistack";
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
import type { QuizQuestionRating } from "../../../model/questionTypes/rating";
import { useQuizData } from "@contexts/QuizDataContext";

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

    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",
                    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: quizId,
                                });

                                updateAnswer(currentQuestion.id, String(value), 0);

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

};