frontAnswerer/lib/components/ViewPublicationPage/questions/Variant.tsx

import {
    Box,
    Checkbox,
    FormControlLabel,
    FormGroup,
    TextField as MuiTextField,
    Radio,
    RadioGroup,
    TextFieldProps,
    Typography,
    useTheme,
} from "@mui/material";
import { FC, useEffect, useState } from "react";

import {
    useQuizViewStore,
} from "@stores/quizView";

import { CheckboxIcon } from "@icons/Checkbox";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";

import { sendAnswer } from "@api/quizRelase";

import { useQuizData } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { enqueueSnackbar } from "notistack";
import type { QuestionVariant } from "../../../model/questionTypes/shared";
import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
import moment from "moment";

const TextField = MuiTextField as unknown as FC<TextFieldProps>;

type VariantProps = {
    currentQuestion: QuizQuestionVariant;
};

export const Variant = ({ currentQuestion }: VariantProps) => {
    const theme = useTheme();
    const isMobile = useRootContainerSize() < 650;
    const answers = useQuizViewStore(state => state.answers);
    const ownVariants = useQuizViewStore(state => state.ownVariants);
    const updateOwnVariant = useQuizViewStore(state => state.updateOwnVariant);

    const { answer } =
        answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
    const ownVariant = ownVariants.find(
        (variant) => variant.id === currentQuestion.id
    );

    const [isSending, setIsSending] = useState(false);

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

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

    if (moment.isMoment(answer))
        throw new Error("Answer is Moment in Variant question");

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

const VariantItem = ({
    currentQuestion,
    variant,
    answer,
    index,
    own = false,
    isSending,
    setIsSending,
}: {
    currentQuestion: QuizQuestionVariant;
    variant: QuestionVariant;
    answer: string | string[] | undefined;
    index: number;
    own?: boolean;
    isSending: boolean;
    setIsSending: (a: boolean) => void;
}) => {
    const theme = useTheme();
    const { settings, quizId, preview } = useQuizData();
    const deleteAnswer = useQuizViewStore(state => state.deleteAnswer);
    const updateAnswer = useQuizViewStore(state => state.updateAnswer);

    return (
        <FormControlLabel
            key={variant.id}
            disabled={isSending}
            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: 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,
                display: "flex",
                maxWidth: "685px",
                maxHeight: "85px",
                justifyContent: "space-between",
                width: "100%",
                "&:hover": { borderColor: theme.palette.primary.main },
                "&.MuiFormControl-root": {
                    width: "100%",
                },
                "& .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",
                    },
                },
                "& .MuiFormControlLabel-label.Mui-disabled": {
                    color: theme.palette.text.primary,
                }
            }}
            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={async (event) => {
                event.preventDefault();
                if (isSending) return;

                setIsSending(true);
                const variantId = currentQuestion.content.variants[index].id;
                console.log(answer);

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

                    try {
                        await sendAnswer({
                            questionId: currentQuestion.id,
                            body: currentAnswer.includes(variantId)
                                ? currentAnswer?.filter((item) => item !== variantId)
                                : [...currentAnswer, variantId],
                            qid: quizId,
                            preview
                        });

                        updateAnswer(
                            currentQuestion.id,
                            currentAnswer.includes(variantId)
                                ? currentAnswer?.filter((item) => item !== variantId)
                                : [...currentAnswer, variantId],
                            currentQuestion.content.variants[index].points || 0
                        );
                    } catch (e) {
                        console.log(e);
                        enqueueSnackbar("ответ не был засчитан");
                    }

                    setIsSending(false);
                    return;
                }

                try {
                    await sendAnswer({
                        questionId: currentQuestion.id,
                        body: currentQuestion.content.variants[index].answer,
                        qid: quizId,
                        preview
                    });

                    updateAnswer(
                        currentQuestion.id,
                        variantId,
                        answer === variantId
                            ? 0
                            : currentQuestion.content.variants[index].points || 0
                    );
                } catch (e) {
                    console.log(e);
                    enqueueSnackbar("ответ не был засчитан");
                }

                if (answer === variantId) {
                    try {
                        await sendAnswer({
                            questionId: currentQuestion.id,
                            body: "",
                            qid: quizId,
                            preview
                        });
                    } catch (e) {
                        console.log(e);
                        enqueueSnackbar("ответ не был засчитан");
                    }
                    deleteAnswer(currentQuestion.id);
                }

                setIsSending(false);
            }}
        />
    );
};