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

import { CheckboxIcon } from "@/assets/icons/Checkbox";
import type { QuestionVariant, QuestionVariantWithEditedImages } from "@/model/questionTypes/shared";
import {
  Box,
  Checkbox,
  FormControlLabel,
  Input,
  Radio,
  TextareaAutosize,
  Typography,
  useTheme,
  ButtonBase,
} 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 { useMemo, type MouseEvent, useRef, useEffect, useState } from "react";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { useQuizStore } from "@/stores/useQuizStore";
import { useTranslation } from "react-i18next";
import { sendAnswer, sendFile } from "@api/quizRelase";
import { enqueueSnackbar } from "notistack";
import { ACCEPT_SEND_FILE_TYPES_MAP, MAX_FILE_SIZE } from "@/components/ViewPublicationPage/tools/fileUpload";
import UploadIcon from "@icons/UploadIcon";
import { uploadFile } from "@/utils/fileUpload";

type ImagesProps = {
  questionId: string;
  variant: QuestionVariantWithEditedImages;
  index: number;
  answer: string | string[] | undefined;
  isMulti: boolean;
  own: boolean;
  questionLargeCheck: boolean;
  ownPlaceholder: string;
};

interface OwnInputProps {
  questionId: string;
  variant: QuestionVariant;
  largeCheck: boolean;
  ownPlaceholder: string;
}
const OwnInput = ({ questionId, variant, largeCheck, ownPlaceholder }: OwnInputProps) => {
  const theme = useTheme();
  const ownVariants = useQuizViewStore((state) => state.ownVariants);
  const { updateOwnVariant } = useQuizViewStore((state) => state);

  const ownAnswer = ownVariants[ownVariants.findIndex((v) => v.id === variant.id)]?.variant.answer || "";

  return largeCheck ? (
    <Box sx={{ overflow: "auto" }}>
      <TextareaAutosize
        placeholder={ownPlaceholder || "|"}
        style={{
          resize: "none",
          width: "100%",
          fontSize: "16px",
          color: ownAnswer.length === 0 ? "ownPlaceholder" : theme.palette.text.primary,
          letterSpacing: "-0.4px",
          wordSpacing: "-3px",
          outline: "0px none",
          backgroundColor: "inherit",
          border: "none",
          //@ts-ignore
          "&::-webkit-scrollbar": {
            width: "4px",
          },
          "&::-webkit-scrollbar-thumb": {
            backgroundColor: theme.palette.primary.main,
          },
          scrollbarColor: theme.palette.primary.main,
        }}
        value={ownAnswer}
        onClick={(e: React.MouseEvent<HTMLTextAreaElement>) => e.stopPropagation()}
        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
          updateOwnVariant(variant.id, e.target.value);
        }}
      />
    </Box>
  ) : (
    <Input
      placeholder={ownPlaceholder || "|"}
      sx={{
        backgroundColor: "inherit",
        width: "100%",
        fontSize: "18px",
        color: ownAnswer.length === 0 ? "ownPlaceholder" : theme.palette.text.primary,
      }}
      value={ownAnswer}
      disableUnderline
      onClick={(e: React.MouseEvent<HTMLElement>) => e.stopPropagation()}
      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
        updateOwnVariant(variant.id, e.target.value);
      }}
    />
  );
};

export const ImageVariant = ({
  questionId,
  answer,
  isMulti,
  variant,
  index,
  own,
  questionLargeCheck,
  ownPlaceholder,
}: ImagesProps) => {
  const { settings } = useQuizStore();
  const { deleteAnswer, updateAnswer } = useQuizViewStore((state) => state);
  const theme = useTheme();
  const { t } = useTranslation();
  const answers = useQuizViewStore((state) => state.answers);
  const isMobile = useRootContainerSize() < 450;
  const isTablet = useRootContainerSize() < 850;
  const [isSending, setIsSending] = useState(false);
  const [isDropzoneHighlighted, setIsDropzoneHighlighted] = useState(false);
  const { quizId, preview } = useQuizStore();
  const [imageUrl, setImageUrl] = useState<string | null>(null);

  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const containerCanvasRef = useRef<HTMLDivElement | null>(null);

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

  const handleFileUpload = async (file: File | undefined) => {
    if (isSending || !file) return;

    const result = await uploadFile({
      file,
      questionId,
      quizId,
      fileType: "picture",
      preview,
      onSuccess: (fileUrl) => {
        setImageUrl(URL.createObjectURL(file));
      },
      onError: (error) => {
        console.error(error);
        enqueueSnackbar(t(error.message));
      },
      onProgress: () => {
        setIsSending(true);
      },
    });

    setIsSending(false);
  };

  const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setIsDropzoneHighlighted(false);

    const file = event.dataTransfer.files[0];
    handleFileUpload(file);
  };

  const choiceImgUrl = useMemo(() => {
    if (variant.editedUrlImagesList !== undefined && variant.editedUrlImagesList !== null) {
      return variant.editedUrlImagesList[isMobile ? "mobile" : isTablet ? "tablet" : "desktop"];
    } else {
      return variant.extendedText;
    }
  }, []);

  useEffect(() => {
    if (canvasRef.current !== null) {
      const canvas = canvasRef.current;
      const ctx = canvas.getContext("2d");
      if (ctx !== null) {
        const img = new Image();
        img.src = choiceImgUrl;

        img.onload = () => {
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        };
      }
    }
  }, []);

  return (
    <Box
      sx={{
        position: "relative",
        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", position: "relative" }}>
          {variant.extendedText && (
            <>
              <img
                src={imageUrl || choiceImgUrl}
                style={{
                  display: "block",
                  width: "100%",
                  height: "100%",
                  objectFit: "cover",
                  borderRadius: "12px 12px 0 0",
                }}
                alt=""
              />
              {own && (
                <ButtonBase
                  component="label"
                  sx={{
                    position: "absolute",
                    top: 0,
                    left: 0,
                    width: "100%",
                    height: "100%",
                    backgroundColor: "rgba(0, 0, 0, 0.5)",
                    opacity: isDropzoneHighlighted ? 1 : 0,
                    transition: "opacity 0.2s",
                    "&:hover": {
                      opacity: 1,
                    },
                    borderRadius: "12px 12px 0 0",
                  }}
                >
                  <input
                    onChange={({ target }) => handleFileUpload(target.files?.[0])}
                    hidden
                    accept={ACCEPT_SEND_FILE_TYPES_MAP.picture.join(",")}
                    type="file"
                  />
                  <UploadIcon color="#FFFFFF" />
                </ButtonBase>
              )}
            </>
          )}
        </Box>
      </Box>
      {own && (
        <Typography
          sx={{
            color: theme.palette.text.primary,
            fontSize: "14px",
            pl: "15px",
          }}
        >
          {t("Enter your answer")}
        </Typography>
      )}
      <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",
            lineHeight: "normal",
            overflow: "auto",
            maxHeight: "100%",
            width: "100%",
            "&::-webkit-scrollbar": {
              width: "4px",
            },
            "&::-webkit-scrollbar-thumb": {
              backgroundColor: theme.palette.primary.main,
            },
            scrollbarColor: theme.palette.primary.main,
          },
        }}
        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={
          own ? (
            <OwnInput
              questionId={questionId}
              variant={variant}
              largeCheck={questionLargeCheck}
              ownPlaceholder={ownPlaceholder || "|"}
            />
          ) : (
            variant.answer
          )
        }
      />
    </Box>
  );
};