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

import {
    Box,
    TextField as MuiTextField,
    TextFieldProps,
    Typography,
    useTheme,
} from "@mui/material";

import CustomTextField from "@ui_kit/CustomTextField";

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

import { sendAnswer } from "@api/quizRelase";
import { useQuizData } from "@contexts/QuizDataContext";
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
import { enqueueSnackbar } from "notistack";
import { ChangeEvent, FC, useEffect, useState } from "react";
import { useDebouncedCallback } from "use-debounce";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import type { QuizQuestionText } from "../../../model/questionTypes/text";

const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)

type TextProps = {
    currentQuestion: QuizQuestionText;
    stepNumber: number | null;
};

const Orientation = [
    { horizontal: true },
    { horizontal: false },
    { horizontal: true },
    { horizontal: true },
    { horizontal: false },
    { horizontal: true },
    { horizontal: true },
    { horizontal: true },
    { horizontal: true },
    { horizontal: true },
    { horizontal: true },
    { horizontal: false },
    { horizontal: true },
    { horizontal: false },
    { horizontal: true },
    { horizontal: true },
    { horizontal: true },
    { horizontal: true },
    { horizontal: false },
    { horizontal: false },
    { horizontal: true },
    { horizontal: true },
    { horizontal: true },
    { horizontal: true },
];

export const Text = ({ currentQuestion, stepNumber }: TextProps) => {
    const { settings, preview } = useQuizData();
    const spec = settings.cfg.spec;
    const { quizId } = useQuizData();
    const answers = useQuizViewStore(state => state.answers);
    const { answer } =
        answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
    const [isSending, setIsSending] = useState<boolean>(false);

    const inputHC = useDebouncedCallback(async (text) => {
        setIsSending(true);
        try {
            await sendAnswer({
                questionId: currentQuestion.id,
                body: text,
                qid: quizId,
                preview
            });
        } catch (e) {
            enqueueSnackbar("ответ не был засчитан");
        }

        setIsSending(false);
    }, 400);
    useEffect(
        () => () => {
            inputHC.flush();
        },
        [inputHC]
    );
    switch (spec) {
        case true:
            return (
                <TextSpecial
                    currentQuestion={currentQuestion}
                    answer={answer}
                    inputHC={inputHC}
                    stepNumber={stepNumber}
                />
            );
        case undefined:
            return (
                <TextNormal
                    currentQuestion={currentQuestion}
                    answer={answer}
                    inputHC={inputHC}
                />
            );
        default:
            return (
                <TextNormal
                    currentQuestion={currentQuestion}
                    answer={answer}
                    inputHC={inputHC}
                />
            );
    }
};

interface Props {
    currentQuestion: QuizQuestionText;
    answer: any;
    inputHC: (a: string) => void;
    stepNumber?: number | null;
}

const TextNormal = ({ currentQuestion, answer, inputHC }: Props) => {
    const isMobile = useRootContainerSize() < 650;
    const theme = useTheme();
    const { settings } = useQuizData();
    const updateAnswer = useQuizViewStore(state => state.updateAnswer);

    return (
        <Box>
            <Typography
                variant="h5"
                color={theme.palette.text.primary}
                sx={{ wordBreak: "break-word" }}
            >
                {currentQuestion.title}
            </Typography>
            <Box
                sx={{
                    display: "flex",
                    width: "100%",
                    marginTop: "20px",
                    flexDirection: isMobile ? "column-reverse" : undefined,
                    alignItems: "center",
                }}
            >
                <CustomTextField
                    placeholder={currentQuestion.content.placeholder}
                    value={answer || ""}
                    onChange={async ({ target }) => {
                        updateAnswer(currentQuestion.id, target.value, 0);
                        inputHC(target.value);
                    }}
                    sx={{
                        "& .MuiOutlinedInput-root": {
                            background: settings.cfg.design
                                ? quizThemes[settings.cfg.theme].isLight
                                    ? "#F2F3F7"
                                    : "rgba(255,255,255, 0.3)"
                                : "transparent",
                        },
                        "& .MuiOutlinedInput-notchedOutline": {
                            borderColor: "#9A9AAF"
                        },
                        "&:focus-visible": { borderColor: theme.palette.primary.main },
                    }}
                />
                {currentQuestion.content.back &&
                    currentQuestion.content.back !== " " && (
                        <Box
                            sx={{
                                maxWidth: "400px",
                                width: "100%",
                                height: "300px",
                                margin: "15px",
                            }}
                        >
                            <img
                                key={currentQuestion.id}
                                src={currentQuestion.content.back}
                                style={{ width: "100%", height: "100%", objectFit: "cover" }}
                                alt=""
                            />
                        </Box>
                    )}
            </Box>
        </Box>
    );
};

const TextSpecial = ({
    currentQuestion,
    answer,
    inputHC,
    stepNumber,
}: Props) => {
    const theme = useTheme();
    const isMobile = useRootContainerSize() < 650;
    const isHorizontal = Orientation[Number(stepNumber) - 1].horizontal;
    const { settings } = useQuizData();
    const updateAnswer = useQuizViewStore(state => state.updateAnswer);

    return (
        <Box
            sx={{
                display: "flex",
                flexDirection: isMobile ? "column" : undefined,
                alignItems: isMobile ? "center" : undefined,
            }}
        >
            <Box
                sx={{
                    display: "flex",
                    width: "100%",
                    marginTop: "20px",
                    flexDirection: "column",
                    alignItems: "center",
                    gap: "20px",
                }}
            >
                <Typography
                    variant="h5"
                    color={theme.palette.text.primary}
                    sx={{ wordBreak: "break-word" }}
                >
                    {currentQuestion.title}
                </Typography>
                {isHorizontal &&
                    currentQuestion.content.back &&
                    currentQuestion.content.back !== " " && (
                        <Box sx={{ margin: "30px", width: "50vw", maxHeight: "550px" }}>
                            <img
                                key={currentQuestion.id}
                                src={currentQuestion.content.back}
                                style={{ width: "100%", height: "100%", objectFit: "cover" }}
                                alt=""
                            />
                        </Box>
                    )}
                {
                    <TextField
                        autoFocus={true}
                        multiline
                        maxRows={4}
                        placeholder={currentQuestion.content.placeholder}
                        value={answer || ""}
                        onChange={async ({ target }: ChangeEvent<HTMLInputElement>) => {
                            updateAnswer(currentQuestion.id, target.value, 0);
                            inputHC(target.value);
                        }}
                        inputProps={{
                            maxLength: 400,
                            background: settings.cfg.design
                                ? quizThemes[settings.cfg.theme].isLight
                                    ? "#F2F3F7"
                                    : "rgba(154,154,175, 0.2)"
                                : "transparent",
                        }}
                        sx={{
                            width: "100%",
                            "& .MuiOutlinedInput-root": {
                                backgroundColor: settings.cfg.design
                                    ? "rgba(154,154,175, 0.2)"
                                    : "#FFFFFF",
                            },
                            "&:focus-visible": {
                                borderColor: theme.palette.primary.main,
                            },
                        }}
                    />
                }
            </Box>
            {!isHorizontal &&
                currentQuestion.content.back &&
                currentQuestion.content.back !== " " && (
                    <Box sx={{ margin: "15px", width: "40vw" }}>
                        <img
                            key={currentQuestion.id}
                            src={currentQuestion.content.back}
                            style={{ width: "100%", height: "100%", objectFit: "cover" }}
                            alt=""
                        />
                    </Box>
                )}
        </Box>
    );
};