import {
    Box,
    FormControl,
    FormControlLabel,
    Radio,
    RadioGroup,
    Typography,
    useTheme
} from "@mui/material";

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

import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";

import { sendAnswer } from "@api/quizRelase";

import { enqueueSnackbar } from "notistack";
import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
import { useQuizData } from "@contexts/QuizDataContext";
import { useState } from "react";

type EmojiProps = {
    currentQuestion: QuizQuestionEmoji;
};

export const Emoji = ({ currentQuestion }: EmojiProps) => {
    const theme = useTheme();
    const { quizId } = useQuizData();
    const { answers } = useQuizViewStore();
    const { answer } =
        answers.find(
            ({ questionId }) => questionId === currentQuestion.id
        ) ?? {};
    const [readySend, setReadySend] = useState(true)

    return (
        <Box>
            <Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>{currentQuestion.title}</Typography>
            <RadioGroup
                name={currentQuestion.id}
                value={currentQuestion.content.variants.findIndex(
                    ({ id }) => answer === id
                )}
                onChange={({ target }) => {
                    updateAnswer(
                        currentQuestion.id,
                        currentQuestion.content.variants[Number(target.value)].answer,
                        currentQuestion.content.variants[Number(target.value)].points || 0
                    );
                }
                }
                sx={{
                    display: "flex",
                    flexWrap: "wrap",
                    flexDirection: "row",
                    justifyContent: "space-between",
                    marginTop: "20px",
                }}
            >
                <Box sx={{ display: "flex", width: "100%", gap: "42px", flexWrap: "wrap" }}>
                    {currentQuestion.content.variants.map((variant, index) => (
                        <FormControl
                            key={variant.id}
                            sx={{
                                borderRadius: "12px",
                                border: `1px solid`,
                                borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
                                overflow: "hidden",
                                maxWidth: "317px",
                                width: "100%",
                                height: "255px",
                            }}
                        >
                            <Box
                                sx={{
                                    display: "flex",
                                    alignItems: "center",
                                    height: "193px",
                                    background: "#ffffff",
                                }}
                            >
                                <Box
                                    sx={{
                                        width: "100%",
                                        display: "flex",
                                        justifyContent: "center",
                                    }}
                                >
                                    {variant.extendedText && (
                                        <Typography fontSize={"100px"}>
                                            {variant.extendedText}
                                        </Typography>
                                    )}
                                </Box>
                            </Box>
                            <FormControlLabel
                                key={variant.id}
                                sx={{
                                    margin: 0,
                                    padding: "15px",
                                    color: theme.palette.text.primary,
                                    display: "flex",
                                    gap: "10px",
                                    alignItems:
                                        variant.answer.length <= 60 ? "center" : "flex-start",
                                    position: "relative",
                                    height: "80px",
                                    "& .MuiFormControlLabel-label": {
                                        wordBreak: "break-word",
                                        height: variant.answer.length <= 60 ? undefined : "60px",
                                        overflow: "auto",
                                        paddingLeft: "45px",
                                    },
                                }}
                                value={index}
                                onClick={async (event) => {
                                    event.preventDefault();
                                    if (readySend) {
                                        setReadySend(false)
                                    try {

                                        await sendAnswer({
                                            questionId: currentQuestion.id,
                                            body: currentQuestion.content.variants[index].extendedText + " " + currentQuestion.content.variants[index].answer,
                                            qid: quizId,
                                        });

                                        updateAnswer(
                                            currentQuestion.id,
                                            currentQuestion.content.variants[index].id,
                                            currentQuestion.content.variants[index].points || 0
                                        );

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



                                    if (answer === currentQuestion.content.variants[index].id) {
                                        deleteAnswer(currentQuestion.id);
                                        try {

                                            await sendAnswer({
                                                questionId: currentQuestion.id,
                                                body: "",
                                                qid: quizId,
                                            });

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

                                }}

                                control={
                                    <Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
                                }
                                label={
                                    <Box sx={{ display: "flex", gap: "10px" }}>
                                        <Typography sx={{ wordBreak: "break-word" }}>{variant.answer}</Typography>
                                    </Box>
                                }
                            />
                        </FormControl>
                    ))}
                </Box>
            </RadioGroup>
        </Box>
    );

};