import { useState } from "react"; import { useParams } from "react-router-dom"; import { Box, Link, Typography, Button, useTheme, useMediaQuery, } from "@mui/material"; import ButtonsOptions from "../ButtonsOptions"; import { AnswerDraggableList } from "../AnswerDraggableList"; import { CropModal } from "@ui_kit/Modal/CropModal"; import { UploadImageModal } from "../UploadImage/UploadImageModal"; import { questionStore, updateQuestionsList } from "@root/questions"; import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import AddImage from "../../../assets/icons/questionsPage/addImage"; import Image from "../../../assets/icons/questionsPage/image"; import SwitchAnswerOptionsPict from "./switchOptionsPict"; import PlusImage from "@icons/questionsPage/plus"; interface Props { totalIndex: number; } export default function OptionsPicture({ totalIndex }: Props) { const [open, setOpen] = useState(false); const [opened, setOpened] = useState(false); const [currentIndex, setCurrentIndex] = useState(0); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(790)); const quizId = Number(useParams().quizId); const [switchState, setSwitchState] = useState("setting"); const { listQuestions } = questionStore(); const SSHC = (data: string) => { setSwitchState(data); }; const uploadImage = (files: FileList | null) => { if (files?.length) { const [file] = Array.from(files); const clonContent = { ...listQuestions[quizId][totalIndex].content }; clonContent.variants[currentIndex].image = URL.createObjectURL(file); updateQuestionsList(quizId, totalIndex, { content: clonContent }); setOpen(false); setOpened(true); } }; const addNewAnswer = () => { const answerNew = listQuestions[quizId][totalIndex].content.variants.slice(); answerNew.push({ answer: "", hints: "", emoji: "", image: "" }); updateQuestionsList(quizId, totalIndex, { content: { ...listQuestions[quizId][totalIndex].content, variants: answerNew, }, }); }; return ( <> ( <> {!isMobile && ( { setCurrentIndex(index); setOpen(true); }} > {variant.image ? ( ) : ( )} )} )} additionalMobile={(variant, index) => ( <> {isMobile && ( { setCurrentIndex(index); setOpen(true); }} sx={{ overflow: "hidden", display: "flex", alignItems: "center", m: "8px", position: "relative", borderRadius: "3px", }} > {variant.image ? ( ) : ( )} + )} )} /> setOpen(false)} imgHC={uploadImage} /> setOpened(false)} picture={ listQuestions[quizId][totalIndex].content.variants[currentIndex] .image } /> Добавьте ответ {isMobile ? null : ( <> или нажмите Enter )} ); }