import {
  Box,
  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 BlankImage from "@icons/BlankImage";
import { useQuizData } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { enqueueSnackbar } from "notistack";
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
import { useState } from "react";

type VarimgProps = {
  currentQuestion: QuizQuestionVarImg;
};

export const Varimg = ({ currentQuestion }: VarimgProps) => {
  const { settings, quizId } = useQuizData();
  const { answers } = useQuizViewStore();
  const theme = useTheme();
  const isMobile = useRootContainerSize() < 650;
  const [isSending, setIsSending] = useState<boolean>(false);

  const { answer } =
    answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
  const variant = currentQuestion.content.variants.find(
    ({ id }) => answer === id
  );

  return (
    <Box>
      <Typography
        variant="h5"
        color={theme.palette.text.primary}
        sx={{ wordBreak: "break-word" }}
      >
        {currentQuestion.title}
      </Typography>
      <Box
        sx={{
          display: "flex",
          marginTop: "20px",
          flexDirection: isMobile ? "column-reverse" : undefined,
          gap: isMobile ? "30px" : undefined,
          alignItems: isMobile ? "center" : undefined,
        }}
      >
        <RadioGroup
          name={currentQuestion.id}
          value={currentQuestion.content.variants.findIndex(
            ({ id }) => answer === id
          )}
          sx={{
            display: "flex",
            flexWrap: "wrap",
            flexDirection: "row",
            justifyContent: "space-between",
            flexBasis: "100%",
            width: isMobile ? "100%" : undefined,
          }}
        >
          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
              width: "100%",
              gap: isMobile ? "20px" : undefined,
            }}
          >
            {currentQuestion.content.variants.map((variant, index) => (
              <FormControlLabel
                key={variant.id}
                disabled={isSending}
                sx={{
                  marginBottom: "15px",
                  borderRadius: "5px",
                  padding: "15px",
                  color: theme.palette.text.primary,
                  backgroundColor: settings.cfg.design
                    ? quizThemes[settings.cfg.theme].isLight
                      ? "#FFFFFF"
                      : "rgba(154,154,175, 0.2)"
                    : quizThemes[settings.cfg.theme].isLight
                    ? "white"
                    : theme.palette.background.default,
                  border: `1px solid`,
                  borderColor:
                    answer === variant.id
                      ? theme.palette.primary.main
                      : "#9A9AAF",
                  display: "flex",
                  margin: isMobile ? 0 : undefined,
                  "& .MuiFormControlLabel-label": {
                    wordBreak: "break-word",
                    height: variant.answer.length <= 60 ? undefined : "60px",
                    overflow: "auto",
                    lineHeight: "normal",
                    paddingLeft: "45px",
                    "&::-webkit-scrollbar": {
                      width: "4px",
                    },
                    "&::-webkit-scrollbar-thumb": {
                      backgroundColor: "#b8babf",
                    },
                  },
                }}
                value={index}
                onClick={async (event) => {
                  event.preventDefault();

                  setIsSending(true);
                  try {
                    await sendAnswer({
                      questionId: currentQuestion.id,
                      body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`,
                      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) {
                    try {
                      await sendAnswer({
                        questionId: currentQuestion.id,
                        body: "",
                        qid: quizId,
                      });
                    } catch (e) {
                      enqueueSnackbar("ответ не был засчитан");
                    }
                    deleteAnswer(currentQuestion.id);
                  }

                  setIsSending(false);
                }}
                control={
                  <Radio
                    checkedIcon={
                      <RadioCheck color={theme.palette.primary.main} />
                    }
                    icon={<RadioIcon />}
                  />
                }
                label={variant.answer}
              />
            ))}
          </Box>
        </RadioGroup>
        {/* {(variant?.extendedText || currentQuestion.content.back) && ( */}
        <Box
          sx={{
            maxWidth: "450px",
            width: "100%",
            height: "450px",
            border: "1px solid #9A9AAF",
            borderRadius: "12px",
            overflow: "hidden",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            backgroundColor: "#9A9AAF12",
            color: theme.palette.text.primary,
            textAlign: "center",
          }}
        >
          {answer ? (
            variant?.extendedText ? (
              <img
                src={variant?.extendedText}
                style={{ width: "100%", height: "100%", objectFit: "cover" }}
                alt=""
              />
            ) : (
              <BlankImage />
            )
          ) : currentQuestion.content.back !== " " &&
            currentQuestion.content.back !== null &&
            currentQuestion.content.back.length > 0 ? (
            <img
              src={currentQuestion.content.back}
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
              alt=""
            />
          ) : currentQuestion.content.replText !== " " &&
            currentQuestion.content.replText.length > 0 ? (
            currentQuestion.content.replText
          ) : variant?.extendedText || isMobile ? (
            "Выберите вариант ответа ниже"
          ) : (
            "Выберите вариант ответа слева"
          )}
        </Box>
        {/* )} */}
      </Box>
    </Box>
  );
};
