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

import CustomTextField from "@ui_kit/CustomTextField";

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

import { sendAnswer } from "@api/quizRelase";
import { enqueueSnackbar } from "notistack";
import { useDebouncedCallback } from "use-debounce";
import type { QuizQuestionText } from "../../../model/questionTypes/text";
import { useQuizData } from "@contexts/QuizDataContext";

type TextProps = {
    currentQuestion: QuizQuestionText;
};

export const Text = ({ currentQuestion }: TextProps) => {
    const theme = useTheme();
    const { quizId } = useQuizData();
    const { answers } = useQuizViewStore();
    const isMobile = useMediaQuery(theme.breakpoints.down(650));
    const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};

    const inputHC = useDebouncedCallback(async (text) => {
        try {

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


        } catch (e) {
            enqueueSnackbar("ответ не был засчитан");
        }
    }, 400);
    return (
        <Box>
            <Typography variant="h5" color={theme.palette.text.primary} sx={{wordBreak: "break-word"}}>{currentQuestion.title}</Typography>
            <Box
                sx={{
                    display: "flex",
                    width: "100%",
                    marginTop: "20px",
                    flexDirection: isMobile ? "column-reverse" : undefined,
                    alignItems: "center"
                }}
            >
                <CustomTextField
                    placeholder={currentQuestion.content.placeholder}
                    //@ts-ignore
                    value={answer || ""}
                    onChange={async ({ target }) => {
                        updateAnswer(currentQuestion.id, target.value, 0);
                        inputHC(target.value);
                    }
                    }
                    sx={{
                        "&:focus-visible": {
                            borderColor: theme.palette.primary.main
                        }
                    }}
                />
                {currentQuestion.content.back && currentQuestion.content.back !== " " && (
                    <Box sx={{ maxWidth: "400px", width: "100%", height: "300px", margin: "15px" }}>
                        <img
                            key={currentQuestion.id}
                            src={currentQuestion.content.back}
                            style={{ width: "100%", height: "100%", objectFit: "cover" }}
                            alt=""
                        />
                    </Box>
                )}
            </Box>
        </Box>
    );
};