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

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

import CustomTextField from "@ui_kit/CustomTextField";

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 type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
import type { QuestionVariant } from "../../../model/questionTypes/shared";

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 { 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">{currentQuestion.title}</Typography>
      <Box sx={{ display: "flex" }}>
        <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 && (
          <Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
            <img
              src={currentQuestion.content.back}
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
              alt=""
            />
          </Box>
        )}
      </Box>
    </Box>
  );
};

const VariantItem = ({
  currentQuestion,
  variant,
  answer,
  index,
  own = false,
}: VariantItemProps) => {
  const theme = useTheme();

  return (
    <FormControlLabel
      key={variant.id}
      sx={{
        margin: "0",
        borderRadius: "12px",
        padding: "15px",
        border: `1px solid ${theme.palette.grey2.main}`,
        display: "flex",
        maxWidth: "685px",
        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 />}
            icon={<CheckboxIcon />}
          />
        ) : (
          <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
        )
      }
      label={own ? <CustomTextField placeholder="Другое..." /> : 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);
        }
      }}
    />
  );
};