frontAnswerer/lib/components/ViewPublicationPage/questions/Images/ImageVariant.tsx

import { CheckboxIcon } from "@/assets/icons/Checkbox";
import type { QuestionVariant } from "@/model/questionTypes/shared";
import { useQuizSettings } from "@contexts/QuizDataContext";
import { Box, Checkbox, 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;
  isMulti: boolean;
  answer: string | string[] | undefined;
};

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

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

    const variantId = variant.id;
    if (isMulti) {
      const currentAnswer = typeof answer !== "string" ? answer || [] : [];

      return updateAnswer(
        questionId,
        currentAnswer.includes(variantId)
          ? currentAnswer?.filter((item) => item !== variantId)
          : [...currentAnswer, variantId],
        variant.points || 0
      );
    }

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

    if (answer === variantId) {
      deleteAnswer(questionId);
    }
  };

  return (
    <Box
      sx={{
        cursor: "pointer",
        borderRadius: "12px",
        border: `1px solid`,
        borderColor: !!answer?.includes(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={
          isMulti ? (
            <Checkbox
              checked={!!answer?.includes(variant.id)}
              checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
              icon={<RadioIcon />}
              sx={{
                position: "absolute",
                top: "-297px",
                right: 0,
              }}
            />
          ) : (
            <Radio
              checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
              icon={<RadioIcon />}
              sx={{
                position: "absolute",
                top: "-297px",
                right: 0,
              }}
            />
          )
        }
        label={variant.answer}
      />
    </Box>
  );
};