import { useEffect, useState } from "react";
import {
  Box,
  FormGroup,
  RadioGroup,
  Typography,
  useTheme,
} from "@mui/material";

import { VariantItem } from "./VariantItem";

import { useQuizViewStore } from "@stores/quizView";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";

import type { QuizQuestionVariant } from "@model/questionTypes/variant";
import moment from "moment";

type VariantProps = {
  currentQuestion: QuizQuestionVariant;
};

export const Variant = ({ currentQuestion }: VariantProps) => {
  const [isSending, setIsSending] = useState(false);
  const answers = useQuizViewStore((state) => state.answers);
  const { ownVariants, updateOwnVariant } = useQuizViewStore((state) => state);
  const theme = useTheme();
  const isMobile = useRootContainerSize() < 650;

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

  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>
  );
};