import type { QuestionVariant } from "@/model/questionTypes/shared";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { Box, FormControlLabel, Radio, useTheme } from "@mui/material";
import { useQuizViewStore } from "@stores/quizView";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import type { MouseEvent } from "react";

type ImagesProps = {
  questionId: string;
  variant: QuestionVariant;
  index: number;
};

export const ImageVariant = ({ questionId, variant, index }: ImagesProps) => {
  const { settings } = useQuizSettings();
  const answers = useQuizViewStore((state) => state.answers);
  const { deleteAnswer, updateAnswer } = useQuizViewStore((state) => state);
  const theme = useTheme();
  const answer = answers.find((answer) => answer.questionId === questionId)?.answer;

  const onVariantClick = async (event: MouseEvent<HTMLDivElement>) => {
    event.preventDefault();

    updateAnswer(questionId, variant.id, variant.points || 0);

    if (answer === variant.id) {
      deleteAnswer(questionId);
    }
  };

  console.log("answers");
  console.log(answers);

  return (
    <Box
      sx={{
        cursor: "pointer",
        borderRadius: "12px",
        border: `1px solid`,
        borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
        "&:hover": { borderColor: theme.palette.primary.main },
        background:
          settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
            ? "rgba(255,255,255, 0.3)"
            : (settings.cfg.design && quizThemes[settings.cfg.theme].isLight) || quizThemes[settings.cfg.theme].isLight
              ? "#FFFFFF"
              : "transparent",
      }}
      onClick={onVariantClick}
    >
      <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
        <Box sx={{ width: "100%", height: "300px" }}>
          {variant.extendedText && (
            <img
              src={variant.extendedText}
              alt=""
              style={{
                display: "block",
                width: "100%",
                height: "100%",
                objectFit: "cover",
                borderRadius: "12px 12px 0 0",
              }}
            />
          )}
        </Box>
      </Box>
      <FormControlLabel
        key={variant.id}
        sx={{
          textAlign: "center",
          color: theme.palette.text.primary,
          marginTop: "10px",
          marginLeft: 0,
          padding: "10px",
          display: "flex",
          alignItems: variant.answer.length <= 60 ? "center" : "flex-start",
          justifyContent: "center",
          position: "relative",
          height: "80px",
          "& .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",
            },
          },
        }}
        value={index}
        control={
          <Radio
            checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
            icon={<RadioIcon />}
            sx={{
              position: "absolute",
              top: "-297px",
              right: 0,
            }}
          />
        }
        label={variant.answer}
      />
    </Box>
  );
};