67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
import type { QuizQuestionEmoji } from "@model/questionTypes/emoji";
|
|
import { Box, RadioGroup, Typography, useTheme } from "@mui/material";
|
|
import { useQuizViewStore } from "@stores/quizView";
|
|
import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
|
|
import { EmojiVariant } from "./EmojiVariant";
|
|
import moment from "moment";
|
|
|
|
polyfillCountryFlagEmojis();
|
|
|
|
type EmojiProps = {
|
|
currentQuestion: QuizQuestionEmoji;
|
|
};
|
|
|
|
export const Emoji = ({ currentQuestion }: EmojiProps) => {
|
|
const answers = useQuizViewStore((state) => state.answers);
|
|
const theme = useTheme();
|
|
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
|
|
|
|
const selectedVariantId = Array.isArray(answer) ? answer[0] : answer;
|
|
|
|
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>
|
|
<RadioGroup
|
|
name={currentQuestion.id}
|
|
value={selectedVariantId}
|
|
sx={{
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
marginTop: "20px",
|
|
}}
|
|
>
|
|
<Box sx={{ display: "flex", width: "100%", gap: "42px", flexWrap: "wrap" }}>
|
|
{currentQuestion.content.variants
|
|
.filter((v) => {
|
|
if (!v.isOwn) return true;
|
|
return v.isOwn && currentQuestion.content.own;
|
|
})
|
|
.map((variant, index) => (
|
|
<EmojiVariant
|
|
key={variant.id}
|
|
questionId={currentQuestion.id}
|
|
variant={variant}
|
|
index={index}
|
|
isMulti={Boolean(currentQuestion.content.multi)}
|
|
own={Boolean(variant.isOwn)}
|
|
questionLargeCheck={true}
|
|
answer={answer}
|
|
ownPlaceholder={currentQuestion.content?.ownPlaceholder || ""}
|
|
/>
|
|
))}
|
|
</Box>
|
|
</RadioGroup>
|
|
</Box>
|
|
);
|
|
};
|