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

import { sendAnswer } from "@api/quizRelase";
import { useQuizViewStore } from "@/stores/quizView";
import { useQuizData } from "@contexts/QuizDataContext";

import { quizThemes } from "@utils/themes/Publication/themePublication";

import CalendarIcon from "@icons/CalendarIcon";

import type { Moment } from "moment";
import type { QuizQuestionDate } from "@model/questionTypes/date";

type DateProps = {
  currentQuestion: QuizQuestionDate;
};

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

  const onDateChange = async (date: Moment | null) => {
    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 (error) {
      enqueueSnackbar("ответ не был засчитан");
    }

    setIsSending(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={onDateChange}
          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>
  );
};