130 lines
3.8 KiB
TypeScript
130 lines
3.8 KiB
TypeScript
import { FormControlLabel, Radio, useTheme } from "@mui/material";
|
|
import { enqueueSnackbar } from "notistack";
|
|
|
|
import { useQuizViewStore } from "@stores/quizView";
|
|
|
|
import { sendAnswer } from "@api/quizRelase";
|
|
import { useQuizData } from "@contexts/QuizDataContext";
|
|
|
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
|
|
|
import RadioCheck from "@ui_kit/RadioCheck";
|
|
import RadioIcon from "@ui_kit/RadioIcon";
|
|
|
|
import type { MouseEvent } from "react";
|
|
import type { QuestionVariant } from "@/model/questionTypes/shared";
|
|
import type { QuizQuestionVarImg } from "@model/questionTypes/varimg";
|
|
|
|
type VarimgVariantProps = {
|
|
currentQuestion: QuizQuestionVarImg;
|
|
variant: QuestionVariant;
|
|
index: number;
|
|
isSending: boolean;
|
|
setIsSending: (isSending: boolean) => void;
|
|
};
|
|
|
|
export const VarimgVariant = ({
|
|
currentQuestion,
|
|
variant,
|
|
index,
|
|
isSending,
|
|
setIsSending,
|
|
}: VarimgVariantProps) => {
|
|
const { settings, quizId, preview } = useQuizData();
|
|
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
|
|
const answers = useQuizViewStore((state) => state.answers);
|
|
|
|
const theme = useTheme();
|
|
|
|
const { answer } =
|
|
answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
|
|
|
|
const sendVariant = async (event: MouseEvent<HTMLLabelElement>) => {
|
|
event.preventDefault();
|
|
|
|
setIsSending(true);
|
|
|
|
try {
|
|
await sendAnswer({
|
|
questionId: currentQuestion.id,
|
|
body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`,
|
|
qid: quizId,
|
|
preview,
|
|
});
|
|
|
|
updateAnswer(
|
|
currentQuestion.id,
|
|
currentQuestion.content.variants[index].id,
|
|
currentQuestion.content.variants[index].points || 0
|
|
);
|
|
} catch (error) {
|
|
enqueueSnackbar("ответ не был засчитан");
|
|
}
|
|
|
|
if (answer === currentQuestion.content.variants[index].id) {
|
|
try {
|
|
await sendAnswer({
|
|
questionId: currentQuestion.id,
|
|
body: "",
|
|
qid: quizId,
|
|
preview,
|
|
});
|
|
} catch (error) {
|
|
enqueueSnackbar("ответ не был засчитан");
|
|
}
|
|
|
|
deleteAnswer(currentQuestion.id);
|
|
}
|
|
|
|
setIsSending(false);
|
|
};
|
|
|
|
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",
|
|
"&::-webkit-scrollbar": { width: "4px" },
|
|
"&::-webkit-scrollbar-thumb": { backgroundColor: "#b8babf" },
|
|
},
|
|
"& .MuiFormControlLabel-label.Mui-disabled": {
|
|
color: theme.palette.text.primary,
|
|
},
|
|
}}
|
|
labelPlacement="start"
|
|
value={index}
|
|
onClick={sendVariant}
|
|
label={variant.answer}
|
|
control={
|
|
<Radio
|
|
checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
|
|
icon={<RadioIcon />}
|
|
/>
|
|
}
|
|
/>
|
|
);
|
|
};
|