import moment from "moment";
import { DatePicker } from "@mui/x-date-pickers";
import { Box, Typography, useTheme } from "@mui/material";

import type { QuizQuestionDate } from "../../../model/questionTypes/date";
import CalendarIcon from "@icons/CalendarIcon";
import { enqueueSnackbar } from "notistack";
import { sendAnswer } from "@api/quizRelase";

import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useQuizData } from "@contexts/QuizDataContext";
import { useState } from "react";
import { useQuizViewStore } from "@/stores/quizView";

type DateProps = {
    currentQuestion: QuizQuestionDate;
};

export const Date = ({ currentQuestion }: DateProps) => {
    const theme = useTheme();
    const { settings, quizId, preview } = useQuizData();
    const answers = useQuizViewStore(state => state.answers);
    const updateAnswer = useQuizViewStore(state => state.updateAnswer);
    const answer = answers.find(
        ({ questionId }) => questionId === currentQuestion.id
    )?.answer as string;
    const currentAnswer = moment(answer) || moment();
    const [isSending, setIsSending] = useState<boolean>(false);

    return (
        <Box>
            <Typography
                variant="h5"
                color={theme.palette.text.primary}
                sx={{ wordBreak: "break-word" }}
            >
                {currentQuestion.title}
            </Typography>
            <Box
                sx={{
                    display: "flex",
                    flexDirection: "column",
                    width: "100%",
                    marginTop: "20px",
                }}
            >
                <DatePicker
                    format="DD/MM/YYYY"
                    slots={{
                        openPickerIcon: () => (
                            <CalendarIcon
                                sx={{
                                    "& path": { stroke: theme.palette.primary.main },
                                    "& rect": { stroke: theme.palette.primary.main },
                                }}
                            />
                        ),
                    }}
                    value={currentAnswer}
                    onChange={async (date) => {
                        if (isSending || !date) return;

                        setIsSending(true);
                        try {
                            await sendAnswer({
                                questionId: currentQuestion.id,
                                body: moment(date).format("YYYY.MM.DD"),
                                qid: quizId,
                                preview
                            });

                            updateAnswer(currentQuestion.id, date, 0);
                        } catch (e) {
                            enqueueSnackbar("ответ не был засчитан");
                        }

                        setIsSending(false);
                    }}
                    slotProps={{
                        openPickerButton: {
                            sx: {
                                p: 0,
                            },
                            "data-cy": "open-datepicker",
                        },
                        layout: {
                            sx: { backgroundColor: theme.palette.background.default },
                        },
                    }}
                    sx={{
                        "& .MuiInputBase-root": {
                            backgroundColor: settings.cfg.design
                                ? quizThemes[settings.cfg.theme].isLight
                                    ? "#F2F3F7"
                                    : "rgba(154,154,175, 0.2)"
                                : quizThemes[settings.cfg.theme].isLight
                                    ? "white"
                                    : theme.palette.background.default,
                            borderRadius: "10px",
                            maxWidth: "250px",
                            pr: "30px",
                            "& input": {
                                py: "11px",
                                pl: "20px",
                                lineHeight: "19px",
                            },
                            "& fieldset": {
                                borderColor: "#9A9AAF",
                            },
                        },
                    }}
                />
            </Box>
        </Box>
    );
};