119 lines
3.8 KiB
TypeScript
119 lines
3.8 KiB
TypeScript
import type { QuestionVariant } from "@/model/questionTypes/shared";
|
|
import { useQuizSettings } from "@contexts/QuizDataContext";
|
|
import { Box, FormControl, FormControlLabel, Radio, Typography, useTheme } from "@mui/material";
|
|
import { useQuizViewStore } from "@stores/quizView";
|
|
import RadioCheck from "@ui_kit/RadioCheck";
|
|
import RadioIcon from "@ui_kit/RadioIcon";
|
|
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
|
import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
|
|
import type { MouseEvent } from "react";
|
|
|
|
polyfillCountryFlagEmojis();
|
|
|
|
type EmojiVariantProps = {
|
|
questionId: string;
|
|
variant: QuestionVariant;
|
|
index: number;
|
|
};
|
|
|
|
export const EmojiVariant = ({ variant, index, questionId }: EmojiVariantProps) => {
|
|
const { settings } = useQuizSettings();
|
|
const answers = useQuizViewStore((state) => state.answers);
|
|
const { updateAnswer, deleteAnswer } = useQuizViewStore((state) => state);
|
|
const theme = useTheme();
|
|
const { answer } = answers.find((answer) => answer.questionId === questionId) ?? {};
|
|
|
|
const onVariantClick = async (event: MouseEvent<HTMLDivElement>) => {
|
|
event.preventDefault();
|
|
|
|
updateAnswer(questionId, variant.id, variant.points || 0);
|
|
|
|
if (answer === variant.id) {
|
|
deleteAnswer(questionId);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<FormControl
|
|
key={index}
|
|
sx={{
|
|
borderRadius: "12px",
|
|
border: `1px solid`,
|
|
borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
|
|
overflow: "hidden",
|
|
maxWidth: "317px",
|
|
width: "100%",
|
|
height: "255px",
|
|
background:
|
|
settings.cfg.design && !quizThemes[settings.cfg.theme].isLight
|
|
? "rgba(255,255,255, 0.3)"
|
|
: (settings.cfg.design && quizThemes[settings.cfg.theme].isLight) || quizThemes[settings.cfg.theme].isLight
|
|
? "#FFFFFF"
|
|
: "transparent",
|
|
"&:hover": { borderColor: theme.palette.primary.main },
|
|
}}
|
|
// value={index}
|
|
onClick={onVariantClick}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
height: "193px",
|
|
background: "#ffffff",
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
{variant.extendedText && <Typography fontSize="100px">{variant.extendedText}</Typography>}
|
|
</Box>
|
|
</Box>
|
|
<FormControlLabel
|
|
key={variant.id}
|
|
sx={{
|
|
margin: 0,
|
|
padding: "15px",
|
|
color: theme.palette.text.primary,
|
|
display: "flex",
|
|
gap: "10px",
|
|
alignItems: variant.answer.length <= 60 ? "center" : "flex-start",
|
|
position: "relative",
|
|
height: "80px",
|
|
justifyContent: "center",
|
|
"& .MuiFormControlLabel-label": {
|
|
wordBreak: "break-word",
|
|
height: variant.answer.length <= 60 ? undefined : "60px",
|
|
overflow: "auto",
|
|
"&::-webkit-scrollbar": { width: "4px" },
|
|
"&::-webkit-scrollbar-thumb": {
|
|
backgroundColor: "#b8babf",
|
|
},
|
|
},
|
|
"& .MuiFormControlLabel-label.Mui-disabled": {
|
|
color: theme.palette.text.primary,
|
|
},
|
|
}}
|
|
value={index}
|
|
control={
|
|
<Radio
|
|
checkedIcon={<RadioCheck color={theme.palette.primary.main} />}
|
|
icon={<RadioIcon />}
|
|
sx={{ position: "absolute", top: "-162px", right: "12px" }}
|
|
/>
|
|
}
|
|
label={
|
|
<Box sx={{ display: "flex", gap: "10px" }}>
|
|
<Typography sx={{ wordBreak: "break-word", lineHeight: "normal" }}>{variant.answer}</Typography>
|
|
</Box>
|
|
}
|
|
/>
|
|
</FormControl>
|
|
);
|
|
};
|