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

import { VariantItem } from "./VariantItem";

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

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

type VariantProps = {
  currentQuestion: QuizQuestionVariant;
};

// 23.02.2025
const crutchlist = {
  115048: { x: 629, y: 491 },
  115101: { x: 979, y: 980 },
  115109: { x: 746, y: 745 },
  115122: { x: 959, y: 960 },
  115132: { x: 541, y: 541 },
  115142: { x: 834, y: 544 },
  115178: { x: 1127, y: 1127 },
  115191: { x: 1106, y: 1106 },
  115207: { x: 905, y: 906 },
  115254: { x: 637, y: 637 },
  115270: { x: 702, y: 703 },
  115287: { x: 714, y: 715 },
  115329: { x: 915, y: 916 },
  115348: { x: 700, y: 701 },
  115368: { x: 400, y: 300 },
  115389: { x: 839, y: 840 },
  115411: { x: 612, y: 610 },
  115434: { x: 474, y: 473 },
  115462: { x: 385, y: 385 },
  115487: { x: 676, y: 677 },
  115515: { x: 341, y: 341 },
  115547: { x: 402, y: 403 },
  115575: { x: 502, y: 503 },
  115612: { x: 400, y: 300 },
  115642: { x: 603, y: 603 },
};

export const Variant = ({ currentQuestion }: VariantProps) => {
  const theme = useTheme();
  const isMobile = useRootContainerSize() < 650;
  const isTablet = useRootContainerSize() < 850;
  const answers = useQuizViewStore((state) => state.answers);
  const ownVariants = useQuizViewStore((state) => state.ownVariants);
  const updateOwnVariant = useQuizViewStore((state) => state.updateOwnVariant);

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

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

  //let isCrutch23022025Question = isCrutch23022025 && crutchlist.hasOwnProperty(currentQuestion.id)

  useEffect(() => {
    if (!ownVariant) {
      updateOwnVariant(currentQuestion.id, "");
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const choiceImgUrlQuestion = useMemo(() => {
    if (
      currentQuestion.content.editedUrlImagesList !== undefined &&
      currentQuestion.content.editedUrlImagesList !== null
    ) {
      return currentQuestion.content.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
    } else {
      return currentQuestion.content.back;
    }
  }, [currentQuestion]);
  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
        id="batya"
        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
              .filter((v) => {
                if (!v.isOwn) return true;
                return v.isOwn && currentQuestion.content.own;
              })
              .map((variant, index) => (
                <VariantItem
                  key={variant.id}
                  questionId={currentQuestion.id}
                  isMulti={currentQuestion.content.multi}
                  variant={variant}
                  answer={answer}
                  index={index}
                  own={Boolean(variant.isOwn)}
                  questionLargeCheck={currentQuestion.content.largeCheck}
                  ownPlaceholder={currentQuestion.content?.ownPlaceholder || ""}
                />
              ))}
          </Box>
        </Group>
        {choiceImgUrlQuestion && choiceImgUrlQuestion !== " " && choiceImgUrlQuestion !== null && (
          <Box
            sx={{
              maxWidth: "400px",
              width: "100%",
              height: "300px",
            }}
            onClick={(event) => event.preventDefault()}
          >
            <img
              key={currentQuestion.id}
              src={choiceImgUrlQuestion}
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
              alt=""
            />
          </Box>
        )}
      </Box>
    </Box>
  );
};