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

import { 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";
import { useState } from "react";

type RatingProps = {
    currentQuestion: QuizQuestionRating;
};

const buttonRatingForm = [
    {
        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} />,
    },
];

export const Rating = ({ currentQuestion }: RatingProps) => {
    const { quizId, preview } = useQuizData();
    const answers = useQuizViewStore(state => state.answers);
    const updateAnswer = useQuizViewStore(state => state.updateAnswer);
    const theme = useTheme();
    const isMobile = useRootContainerSize() < 650;
    const isTablet = useRootContainerSize() < 750;
    const [isSending, setIsSending] = useState<boolean>(false);
    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",
                }}
            >
                <Box
                    sx={{
                        display: "inline-block",
                        width: "100%",
                    }}
                >
                    <RatingComponent
                        disabled={isSending}
                        value={Number(answer || 0)}
                        onChange={async (_, value) => {
                            setIsSending(true);
                            try {

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

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

                            } catch (e) {
                                enqueueSnackbar("ответ не был засчитан");
                            }

                            setIsSending(false);
                        }}
                        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>
    );

};