import { useState } from "react";
import { Box, Typography, useTheme } from "@mui/material";
import { enqueueSnackbar } from "notistack";

import { Select as SelectComponent } from "@/components/ViewPublicationPage/tools/Select";

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

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

import type { QuizQuestionSelect } from "@model/questionTypes/select";

type SelectProps = {
  currentQuestion: QuizQuestionSelect;
};

export const Select = ({ currentQuestion }: SelectProps) => {
  const [isSending, setIsSending] = useState<boolean>(false);
  const { quizId, settings, preview } = useQuizData();
  const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
  const answers = useQuizViewStore((state) => state.answers);
  const theme = useTheme();
  const { answer } =
    answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};

  const sendSelectedAnswer = async (value: number) => {
    setIsSending(true);

    if (value < 0) {
      deleteAnswer(currentQuestion.id);

      try {
        await sendAnswer({
          questionId: currentQuestion.id,
          body: "",
          qid: quizId,
          preview,
        });
      } catch (error) {
        enqueueSnackbar("ответ не был засчитан");
      }

      return setIsSending(false);
    }

    try {
      await sendAnswer({
        questionId: currentQuestion.id,
        body: String(currentQuestion.content.variants[Number(value)].answer),
        qid: quizId,
        preview,
      });

      updateAnswer(currentQuestion.id, String(value), 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",
        }}
      >
        <SelectComponent
          disabled={isSending}
          placeholder={currentQuestion.content.default}
          activeItemIndex={answer ? Number(answer) : -1}
          items={currentQuestion.content.variants.map(({ answer }) => answer)}
          colorMain={theme.palette.primary.main}
          sx={{
            "& .MuiSelect-select.MuiSelect-outlined": { zIndex: 1 },
            "& .MuiOutlinedInput-notchedOutline": {
              background: settings.cfg.design
                ? quizThemes[settings.cfg.theme].isLight
                  ? "#F2F3F7"
                  : "rgba(255,255,255, 0.3)"
                : "transparent",
            },
          }}
          onChange={(_, value) => sendSelectedAnswer(value)}
        />
      </Box>
    </Box>
  );
};