import { useState } from "react"; import { useParams } from "react-router-dom"; import { Box, Link, Typography, useMediaQuery, useTheme, Popover, } from "@mui/material"; import { EnterIcon } from "../../../assets/icons/questionsPage/enterIcon"; import ButtonsOptions from "../ButtonsOptions"; import SwitchEmoji from "./switchEmoji"; import { AnswerDraggableList } from "../AnswerDraggableList"; import { EmojiPicker } from "@ui_kit/EmojiPicker"; import { EmojiIcons } from "@icons/EmojiIocns"; import { questionStore, updateQuestionsList } from "@root/questions"; import AddEmoji from "@icons/questionsPage/addEmoji"; import PlusImage from "@icons/questionsPage/plus"; interface Props { totalIndex: number; } export default function Emoji({ totalIndex }: Props) { const [switchState, setSwitchState] = useState("setting"); const [open, setOpen] = useState(false); const [anchorElement, setAnchorElement] = useState( null ); const [currentIndex, setCurrentIndex] = useState(0); const { listQuestions } = questionStore(); const quizId = Number(useParams().quizId); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const SSHC = (data: string) => { setSwitchState(data); }; return ( <> {/* {!isMobile && ( + )} ), endAdornment: ( ), }} sx={{ "& .MuiInputBase-root": { padding: "13.5px", borderRadius: "10px", background: "#ffffff", height: "48px", }, "& .MuiOutlinedInput-notchedOutline": { border: "none", }, }} inputProps={{ sx: { fontSize: "18px", lineHeight: "21px", py: 0 }, }} /> {isMobile && ( + )} */} ( <> {!isTablet && ( { setAnchorElement(currentTarget); setCurrentIndex(index); setOpen(true); }} > {variant.emoji ? ( {variant.emoji} ) : ( )} )} )} additionalMobile={(variant, index) => ( <> {isTablet && ( { setAnchorElement(currentTarget); setCurrentIndex(index); setOpen(true); }} sx={{ display: "flex", alignItems: "center", m: "8px", position: "relative", }} > {variant.emoji ? ( {variant.emoji} ) : ( )} + )} )} /> event.stopPropagation()} onClose={() => setOpen(false)} anchorOrigin={{ vertical: "bottom", horizontal: "right", }} sx={{ ".MuiPaper-root.MuiPaper-rounded": { borderRadius: "10px", }, }} > { setOpen(false); const cloneVariants = [ ...listQuestions[quizId][totalIndex].content.variants, ]; cloneVariants[currentIndex] = { ...cloneVariants[currentIndex], emoji: native, }; updateQuestionsList(quizId, totalIndex, { content: { ...listQuestions[quizId][totalIndex].content, variants: cloneVariants, }, }); }} /> { const answerNew = listQuestions[quizId][totalIndex].content.variants.slice(); answerNew.push({ answer: "", hints: "", emoji: "", image: "" }); updateQuestionsList(quizId, totalIndex, { content: { ...listQuestions[quizId][totalIndex].content, variants: answerNew, }, }); }} > Добавьте ответ {!isTablet && ( <> или нажмите Enter )} ); }