122 lines
3.9 KiB
TypeScript
122 lines
3.9 KiB
TypeScript
import { useState } from "react";
|
|
import { Box, RadioGroup, Typography, useTheme } from "@mui/material";
|
|
|
|
import { VarimgVariant } from "./VarimgVariant";
|
|
|
|
import { useQuizViewStore } from "@stores/quizView";
|
|
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
|
|
|
import BlankImage from "@icons/BlankImage";
|
|
|
|
import type { QuizQuestionVarImg } from "@model/questionTypes/varimg";
|
|
|
|
type VarimgProps = {
|
|
currentQuestion: QuizQuestionVarImg;
|
|
};
|
|
|
|
export const Varimg = ({ currentQuestion }: VarimgProps) => {
|
|
const [isSending, setIsSending] = useState<boolean>(false);
|
|
const answers = useQuizViewStore((state) => state.answers);
|
|
|
|
const theme = useTheme();
|
|
const isMobile = useRootContainerSize() < 650;
|
|
|
|
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
|
|
const variant = currentQuestion.content.variants.find(({ id }) => answer === id);
|
|
|
|
return (
|
|
<Box>
|
|
<Typography variant="h5" color={theme.palette.text.primary} sx={{ wordBreak: "break-word" }}>
|
|
{currentQuestion.title}
|
|
</Typography>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
marginTop: "20px",
|
|
flexDirection: isMobile ? "column-reverse" : undefined,
|
|
gap: "30px",
|
|
alignItems: isMobile ? "center" : undefined,
|
|
}}
|
|
>
|
|
<RadioGroup
|
|
name={currentQuestion.id}
|
|
value={currentQuestion.content.variants.findIndex(({ id }) => answer === id)}
|
|
sx={{
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
flexBasis: "100%",
|
|
width: isMobile ? "100%" : undefined,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
width: "100%",
|
|
gap: "20px",
|
|
"&:focus": { color: theme.palette.text.primary },
|
|
"&:active": { color: theme.palette.text.primary },
|
|
}}
|
|
>
|
|
{currentQuestion.content.variants.map((variant, index) => (
|
|
<VarimgVariant
|
|
key={variant.id}
|
|
currentQuestion={currentQuestion}
|
|
variant={variant}
|
|
isSending={isSending}
|
|
setIsSending={setIsSending}
|
|
index={index}
|
|
/>
|
|
))}
|
|
</Box>
|
|
</RadioGroup>
|
|
<Box
|
|
sx={{
|
|
maxWidth: "450px",
|
|
width: "100%",
|
|
height: "450px",
|
|
border: "1px solid #9A9AAF",
|
|
borderRadius: "12px",
|
|
overflow: "hidden",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: "#9A9AAF30",
|
|
color: theme.palette.text.primary,
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
{answer ? (
|
|
variant?.extendedText ? (
|
|
<img
|
|
key={variant.extendedText}
|
|
src={variant.extendedText}
|
|
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
|
alt=""
|
|
/>
|
|
) : (
|
|
<BlankImage />
|
|
)
|
|
) : currentQuestion.content.back !== " " &&
|
|
currentQuestion.content.back !== null &&
|
|
currentQuestion.content.back.length > 0 ? (
|
|
<img
|
|
src={currentQuestion.content.back}
|
|
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
|
alt=""
|
|
/>
|
|
) : currentQuestion.content.replText !== " " && currentQuestion.content.replText.length > 0 ? (
|
|
currentQuestion.content.replText
|
|
) : variant?.extendedText || isMobile ? (
|
|
"Выберите вариант ответа ниже"
|
|
) : (
|
|
"Выберите вариант ответа слева"
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|