import {
  Box,
  Checkbox,
  FormControlLabel,
  FormGroup,
  TextField as MuiTextField,
  Radio,
  RadioGroup,
  TextFieldProps,
  Typography,
  useTheme,
} from "@mui/material";
import { FC, useEffect, useState } from "react";

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

import { CheckboxIcon } from "@icons/Checkbox";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";

import { sendAnswer } from "@api/quizRelase";

import { useQuizData } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { enqueueSnackbar } from "notistack";
import type { QuestionVariant } from "../../../model/questionTypes/shared";
import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
import moment from "moment";

const TextField = MuiTextField as unknown as FC<TextFieldProps>;

type VariantProps = {
  currentQuestion: QuizQuestionVariant;
};

export const Variant = ({ currentQuestion }: VariantProps) => {
  const theme = useTheme();
  const isMobile = useRootContainerSize() < 650;
  const { answers, ownVariants } = useQuizViewStore();
  const { answer } =
    answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
  const ownVariant = ownVariants.find(
    (variant) => variant.id === currentQuestion.id
  );

  const [isSending, setIsSending] = useState(false);

  const Group = currentQuestion.content.multi ? FormGroup : RadioGroup;

  useEffect(() => {
    if (!ownVariant) {
      updateOwnVariant(currentQuestion.id, "");
    }
  }, []);

  if (moment.isMoment(answer))
    throw new Error("Answer is Moment in Variant question");

  return (
    <Box>
      <Typography
        variant="h5"
        color={theme.palette.text.primary}
        sx={{ wordBreak: "break-word" }}
      >
        {currentQuestion.title}
      </Typography>
      <Box
        sx={{
          display: "flex",
          gap: "20px",
          flexDirection: isMobile ? "column-reverse" : undefined,
          alignItems: isMobile ? "center" : undefined,
        }}
      >
        <Group
          name={currentQuestion.id.toString()}
          value={currentQuestion.content.variants.findIndex(
            ({ id }) => answer === id
          )}
          sx={{
            display: "flex",
            flexWrap: "wrap",
            flexDirection: "row",
            justifyContent: "space-between",
            flexBasis: "100%",
            marginTop: "20px",
            width: isMobile ? "100%" : undefined,
          }}
        >
          <Box
            sx={{
              display: "flex",
              flexDirection: "row",
              flexWrap: "wrap",
              width: "100%",
              gap: "20px",
            }}
          >
            {currentQuestion.content.variants.map((variant, index) => (
              <VariantItem
                key={variant.id}
                currentQuestion={currentQuestion}
                variant={variant}
                answer={answer}
                index={index}
                isSending={isSending}
                setIsSending={setIsSending}
              />
            ))}
            {currentQuestion.content.own && ownVariant && (
              <VariantItem
                own
                currentQuestion={currentQuestion}
                variant={ownVariant.variant}
                answer={answer}
                index={currentQuestion.content.variants.length + 2}
                isSending={isSending}
                setIsSending={setIsSending}
              />
            )}
          </Box>
        </Group>
        {currentQuestion.content.back &&
          currentQuestion.content.back !== " " && (
            <Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
              <img
                key={currentQuestion.id}
                src={currentQuestion.content.back}
                style={{ width: "100%", height: "100%", objectFit: "cover" }}
                alt=""
              />
            </Box>
          )}
      </Box>
    </Box>
  );
};

const VariantItem = ({
  currentQuestion,
  variant,
  answer,
  index,
  own = false,
  isSending,
  setIsSending,
}: {
  currentQuestion: QuizQuestionVariant;
  variant: QuestionVariant;
  answer: string | string[] | undefined;
  index: number;
  own?: boolean;
  isSending: boolean;
  setIsSending: (a: boolean) => void;
}) => {
  const theme = useTheme();
  const { settings, quizId, preview } = useQuizData();

  return (
    <FormControlLabel
      key={variant.id}
      disabled={isSending}
      sx={{
        margin: "0",
        borderRadius: "12px",
        color: theme.palette.text.primary,
        padding: "15px",
        border: `1px solid`,
        borderColor:
          answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
        backgroundColor: settings.cfg.design
          ? quizThemes[settings.cfg.theme].isLight
            ? "#FFFFFF"
            : "rgba(255,255,255, 0.3)"
          : quizThemes[settings.cfg.theme].isLight
          ? "white"
          : theme.palette.background.default,
        display: "flex",
        maxWidth: "685px",
        maxHeight: "85px",
        justifyContent: "space-between",
        width: "100%",
        "&:hover": {borderColor: theme.palette.primary.main},
        "&.MuiFormControl-root": {
          width: "100%",
        },
        "& .MuiFormControlLabel-label": {
          wordBreak: "break-word",
          height: variant.answer.length <= 60 ? undefined : "60px",
          overflow: "auto",
          lineHeight: "normal",
          "&::-webkit-scrollbar": {
            width: "4px",
          },
          "&::-webkit-scrollbar-thumb": {
            backgroundColor: "#b8babf",
          },
        },
          "& .MuiFormControlLabel-label.Mui-disabled": {
              color: theme.palette.text.primary,
          }
      }}
      value={index}
      labelPlacement="start"
      control={
        currentQuestion.content.multi ? (
          <Checkbox
            checked={!!answer?.includes(variant.id)}
            checkedIcon={
              <CheckboxIcon checked color={theme.palette.primary.main} />
            }
            icon={<CheckboxIcon />}
          />
        ) : (
          <Radio
            checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
            icon={<RadioIcon />}
          />
        )
      }
      label={own ? <TextField label="Другое..." /> : variant.answer}
      onClick={async (event) => {
        event.preventDefault();
        if (isSending) return;

        setIsSending(true);
        const variantId = currentQuestion.content.variants[index].id;
        console.log(answer);

        if (currentQuestion.content.multi) {
          const currentAnswer = typeof answer !== "string" ? answer || [] : [];

          try {
            await sendAnswer({
              questionId: currentQuestion.id,
              body: currentAnswer.includes(variantId)
                ? currentAnswer?.filter((item) => item !== variantId)
                : [...currentAnswer, variantId],
              qid: quizId,
              preview
            });

            updateAnswer(
              currentQuestion.id,
              currentAnswer.includes(variantId)
                ? currentAnswer?.filter((item) => item !== variantId)
                : [...currentAnswer, variantId],
              currentQuestion.content.variants[index].points || 0
            );
          } catch (e) {
            console.log(e);
            enqueueSnackbar("ответ не был засчитан");
          }

          setIsSending(false);
          return;
        }

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

          updateAnswer(
            currentQuestion.id,
            variantId,
            answer === variantId
              ? 0
              : currentQuestion.content.variants[index].points || 0
          );
        } catch (e) {
          console.log(e);
          enqueueSnackbar("ответ не был засчитан");
        }

        if (answer === variantId) {
          try {
            await sendAnswer({
              questionId: currentQuestion.id,
              body: "",
              qid: quizId,
              preview
            });
          } catch (e) {
            console.log(e);
            enqueueSnackbar("ответ не был засчитан");
          }
          deleteAnswer(currentQuestion.id);
        }

        setIsSending(false);
      }}
    />
  );
};
