frontAnswerer/lib/components/ViewPublicationPage/questions/Varimg/VarimgVariant.tsx

import type { QuestionVariant, QuestionVariantWithEditedImages } from "@/model/questionTypes/shared";
import { useQuizSettings } from "@contexts/QuizDataContext";
import {
  FormControlLabel,
  TextareaAutosize,
  Radio,
  useTheme,
  Box,
  Input,
  FormControl,
  InputLabel,
  Typography,
} 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";
import { useTranslation } from "react-i18next";
import { useDebouncedCallback } from "use-debounce";

type VarimgVariantProps = {
  questionId: string;
  variant: QuestionVariantWithEditedImages;
  index: number;
  isSending: boolean;
  setIsSending: (isSending: boolean) => void;
  questionLargeCheck: boolean;
  isMulti: boolean;
  answer: string | string[] | undefined;
  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 ? (
    <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,
        maxHeight: "44px",
        overflow: "auto",
      }}
      value={ownAnswer}
      onClick={(e: React.MouseEvent<HTMLTextAreaElement>) => e.stopPropagation()}
      onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
        updateOwnVariant(variant.id, e.target.value);
      }}
    />
  ) : (
    <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 VarimgVariant = ({
  questionId,
  variant,
  index,
  isSending,
  setIsSending,
  questionLargeCheck,
  ownPlaceholder,
  answer,
}: VarimgVariantProps) => {
  const theme = useTheme();
  const { t } = useTranslation();
  const { settings } = useQuizSettings();
  const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);

  const sendVariant = async (event: MouseEvent<HTMLLabelElement>) => {
    event.preventDefault();

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

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

  if (variant?.isOwn) {
    return (
      <Box>
        <Typography
          sx={{
            color: theme.palette.text.primary,
            fontSize: "14px",
            pl: "15px",
          }}
        >
          {t("Enter your answer")}
        </Typography>

        <FormControlLabel
          key={variant.id}
          disabled={isSending}
          sx={{
            marginBottom: "15px",
            borderRadius: "12px",
            padding: "20px",
            color: theme.palette.text.primary,
            backgroundColor: settings.cfg.design
              ? quizThemes[settings.cfg.theme].isLight
                ? "#FFFFFF"
                : "rgba(255,255,255, 0.3)"
              : quizThemes[settings.cfg.theme].isLight
                ? "white"
                : theme.palette.background.default,
            border: `1px solid`,
            borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
            display: "flex",
            margin: 0,
            justifyContent: "space-between",
            "&:hover": { borderColor: theme.palette.primary.main },
            "& .MuiFormControlLabel-label": {
              wordBreak: "break-word",
              height: variant.answer.length <= 60 ? undefined : "60px",
              overflow: "auto",
              lineHeight: "normal",
              width: "100%",
              "&::-webkit-scrollbar": {
                width: "4px",
              },
              "&::-webkit-scrollbar-thumb": {
                backgroundColor: theme.palette.primary.main,
              },
              scrollbarColor: theme.palette.primary.main,
            },
            "& .MuiFormControlLabel-label.Mui-disabled": {
              color: theme.palette.text.primary,
            },
          }}
          labelPlacement="start"
          value={index}
          onClick={sendVariant}
          label={
            variant?.isOwn ? (
              <OwnInput
                questionId={questionId}
                variant={variant}
                largeCheck={questionLargeCheck}
                ownPlaceholder={ownPlaceholder || "|"}
              />
            ) : (
              variant.answer
            )
          }
          control={
            <Radio
              checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
              icon={<RadioIcon />}
            />
          }
        />
      </Box>
    );
  } else {
    return (
      <FormControlLabel
        key={variant.id}
        disabled={isSending}
        sx={{
          marginBottom: "15px",
          borderRadius: "12px",
          padding: "20px",
          color: theme.palette.text.primary,
          backgroundColor: settings.cfg.design
            ? quizThemes[settings.cfg.theme].isLight
              ? "#FFFFFF"
              : "rgba(255,255,255, 0.3)"
            : quizThemes[settings.cfg.theme].isLight
              ? "white"
              : theme.palette.background.default,
          border: `1px solid`,
          borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
          display: "flex",
          margin: 0,
          justifyContent: "space-between",
          "&:hover": { borderColor: theme.palette.primary.main },
          "& .MuiFormControlLabel-label": {
            wordBreak: "break-word",
            height: variant.answer.length <= 60 ? undefined : "60px",
            overflow: "auto",
            lineHeight: "normal",
            width: "100%",
            "&::-webkit-scrollbar": {
              width: "4px",
            },
            "&::-webkit-scrollbar-thumb": {
              backgroundColor: theme.palette.primary.main,
            },
            scrollbarColor: theme.palette.primary.main,
          },
          "& .MuiFormControlLabel-label.Mui-disabled": {
            color: theme.palette.text.primary,
          },
        }}
        labelPlacement="start"
        value={index}
        onClick={sendVariant}
        label={
          variant?.isOwn ? (
            <OwnInput
              questionId={questionId}
              variant={variant}
              largeCheck={questionLargeCheck}
              ownPlaceholder={ownPlaceholder || "|"}
            />
          ) : (
            variant.answer
          )
        }
        control={
          <Radio
            checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
            icon={<RadioIcon />}
          />
        }
      />
    );
  }
};