frontPanel/src/pages/ViewPublicationPage/questions/Variant.tsx

import { useEffect } from "react";
import {
  Box,
  Typography,
  RadioGroup,
  FormGroup,
  FormControlLabel,
  Radio,
  Checkbox,
  TextField,
  useTheme,
  useMediaQuery,
} from "@mui/material";

import {
  useQuizViewStore,
  updateAnswer,
  deleteAnswer,
  updateOwnVariant,
  deleteOwnVariant,
} from "@root/quizView";

import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import CheckboxIcon from "@icons/Checkbox";
import { modes } from "../../../utils/themes/Publication/themePublication";

import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
import type { QuestionVariant } from "../../../model/questionTypes/shared";
import { useCurrentQuiz } from "@root/quizes/hooks";

type VariantProps = {
  stepNumber: number;
  currentQuestion: QuizQuestionVariant;
};

type VariantItemProps = {
  currentQuestion: QuizQuestionVariant;
  variant: QuestionVariant;
  answer: string | string[] | undefined;
  index: number;
  own?: boolean;
};

export const Variant = ({ currentQuestion }: VariantProps) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(650));
  const { answers, ownVariants } = useQuizViewStore();
  const { answer } =
    answers.find(
      ({ questionId }) => questionId === currentQuestion.content.id,
    ) ?? {};
  const ownVariant = ownVariants.find(
    (variant) => variant.contentId === currentQuestion.content.id,
  );

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

  useEffect(() => {
    if (!ownVariant) {
      updateOwnVariant(currentQuestion.content.id, "");
    }
  }, []);

  return (
    <Box>
      <Typography variant="h5" color={theme.palette.text.primary}>
        {currentQuestion.title}
      </Typography>
      <Box
        sx={{
          display: "flex",
          gap: "20px",
          flexDirection: isMobile ? "column-reverse" : undefined,
        }}
      >
        <Group
          name={currentQuestion.id}
          value={currentQuestion.content.variants.findIndex(
            ({ id }) => answer === id,
          )}
          sx={{
            display: "flex",
            flexWrap: "wrap",
            flexDirection: "row",
            justifyContent: "space-between",
            flexBasis: "100%",
            marginTop: "20px",
          }}
        >
          <Box
            sx={{
              display: "flex",
              flexDirection: "row",
              flexWrap: "wrap",
              width: "100%",
              gap: "20px",
            }}
          >
            {currentQuestion.content.variants.map((variant, index) => (
              <VariantItem
                key={variant.id}
                currentQuestion={currentQuestion}
                variant={variant}
                answer={answer}
                index={index}
              />
            ))}
            {currentQuestion.content.own && ownVariant && (
              <VariantItem
                own
                currentQuestion={currentQuestion}
                variant={ownVariant.variant}
                answer={answer}
                index={currentQuestion.content.variants.length + 2}
              />
            )}
          </Box>
        </Group>
        {currentQuestion.content.back && currentQuestion.content.back !== " " && (
          <Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
            <img
              src={currentQuestion.content.back}
              style={{ width: "100%", height: "100%", objectFit: "cover", margin: "10px" }}
              alt=""
            />
          </Box>
        )}
      </Box>
    </Box>
  );
};

const VariantItem = ({
  currentQuestion,
  variant,
  answer,
  index,
  own = false,
}: VariantItemProps) => {
  const theme = useTheme();
  const mode = modes;
  const quiz = useCurrentQuiz();
  return (
    <FormControlLabel
      key={variant.id}
      sx={{
        margin: "0",
        borderRadius: "12px",
        color: theme.palette.text.primary,
        padding: "15px",
        border: `1px solid`,
        borderColor:
          answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
        backgroundColor: mode[quiz.config.theme]
          ? "white"
          : theme.palette.background.default,
        display: "flex",
        maxWidth: "685px",
        maxHeight: "85px",
        justifyContent: "space-between",
        width: "100%",
        "&.MuiFormControl-root": {
          width: "100%",
        },
      }}
      value={index}
      labelPlacement="start"
      control={
        currentQuestion.content.multi ? (
          <Checkbox
            checked={!!answer?.includes(variant.id)}
            checkedIcon={
              <CheckboxIcon checked color={theme.palette.primary.main} />
            }
            icon={<CheckboxIcon />}
          />
        ) : (
          <Radio
            checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
            icon={<RadioIcon />}
          />
        )
      }
      label={own ? <TextField label="Другое..." /> : variant.answer}
      onClick={(event) => {
        event.preventDefault();
        const variantId = currentQuestion.content.variants[index].id;

        if (currentQuestion.content.multi) {
          const currentAnswer = typeof answer !== "string" ? answer || [] : [];

          updateAnswer(
            currentQuestion.content.id,
            currentAnswer.includes(variantId)
              ? currentAnswer?.filter((item) => item !== variantId)
              : [...currentAnswer, variantId],
          );

          return;
        }

        updateAnswer(currentQuestion.content.id, variantId);

        if (answer === variantId) {
          deleteAnswer(currentQuestion.content.id);
        }
      }}
    />
  );
};