296 lines
9.8 KiB
TypeScript
296 lines
9.8 KiB
TypeScript
import { useState } from "react";
|
||
import { useParams } from "react-router-dom";
|
||
import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import { useDebouncedCallback } from "use-debounce";
|
||
import ButtonsOptions from "../ButtonsOptions";
|
||
import CustomTextField from "@ui_kit/CustomTextField";
|
||
import AddImage from "../../../assets/icons/questionsPage/addImage";
|
||
import AddVideofile from "../../../assets/icons/questionsPage/addVideofile";
|
||
import SwitchPageOptions from "./switchPageOptions";
|
||
import { questionStore, updateQuestionsList } from "@root/questions";
|
||
import { UploadImageModal } from "../UploadImage/UploadImageModal";
|
||
import { UploadVideoModal } from "../UploadVideoModal";
|
||
import { AddPlusImage } from "@icons/questionsPage/addPlusImage";
|
||
import { AddPlusVideo } from "@icons/questionsPage/addPlusVideo";
|
||
import { ImageAddIcons } from "@icons/ImageAddIcons";
|
||
import { VideofileIcon } from "@icons/questionsPage/VideofileIcon";
|
||
|
||
type Props = {
|
||
disableInput?: boolean;
|
||
totalIndex: number;
|
||
};
|
||
|
||
export default function PageOptions({ disableInput, totalIndex }: Props) {
|
||
const [openImageModal, setOpenImageModal] = useState<boolean>(false);
|
||
const [openVideoModal, setOpenVideoModal] = useState<boolean>(false);
|
||
const [switchState, setSwitchState] = useState("setting");
|
||
const quizId = Number(useParams().quizId);
|
||
const { listQuestions } = questionStore();
|
||
const theme = useTheme();
|
||
const isTablet = useMediaQuery(theme.breakpoints.down(980));
|
||
const isFigmaTablet = useMediaQuery(theme.breakpoints.down(990));
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(780));
|
||
const debounced = useDebouncedCallback((value) => {
|
||
const clonContent = listQuestions[quizId][totalIndex].content;
|
||
clonContent.text = value;
|
||
updateQuestionsList(quizId, totalIndex, { content: clonContent });
|
||
}, 1000);
|
||
|
||
const SSHC = (data: string) => {
|
||
setSwitchState(data);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<Box
|
||
sx={{
|
||
width: isTablet ? "auto" : "100%",
|
||
maxWidth: isFigmaTablet ? "549px" : "640px",
|
||
display: "flex",
|
||
px: "20px",
|
||
flexDirection: "column",
|
||
gap: isMobile ? "25px" : "20px",
|
||
}}
|
||
>
|
||
<Box sx={{ display: disableInput ? "none" : "", mt: isMobile ? "15px" : "0px" }}>
|
||
<CustomTextField
|
||
placeholder={"Можно добавить текст"}
|
||
text={listQuestions[quizId][totalIndex].content.text}
|
||
onChange={({ target }) => debounced(target.value)}
|
||
/>
|
||
</Box>
|
||
|
||
<Box
|
||
sx={{
|
||
mb: "20px",
|
||
ml: isTablet ? "0px" : "60px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "28px",
|
||
justifyContent: isMobile ? "space-between" : null,
|
||
}}
|
||
>
|
||
<Box
|
||
onClick={() => setOpenImageModal(true)}
|
||
sx={{
|
||
cursor: "pointer",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "20px",
|
||
}}
|
||
>
|
||
{isMobile ? (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
width: "120px",
|
||
position: "relative",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
background: "#EEE4FC",
|
||
height: "40px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
borderTopLeftRadius: "4px",
|
||
borderBottomLeftRadius: "4px",
|
||
}}
|
||
>
|
||
<ImageAddIcons
|
||
style={{
|
||
color: "#7E2AEA",
|
||
fontSize: "20px",
|
||
}}
|
||
/>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
width: "20px",
|
||
background: "#EEE4FC",
|
||
height: "40px",
|
||
color: "white",
|
||
backgroundColor: "#7E2AEA",
|
||
borderTopRightRadius: "4px",
|
||
borderBottomRightRadius: "4px",
|
||
}}
|
||
>
|
||
+
|
||
</Box>
|
||
</Box>
|
||
) : (
|
||
<Box
|
||
sx={{
|
||
width: "60px",
|
||
height: "40px",
|
||
background: "#EEE4FC",
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
}}
|
||
>
|
||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
|
||
<ImageAddIcons fontSize="22px" color="#7E2AEA" />
|
||
</Box>
|
||
<span
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
background: "#7E2AEA",
|
||
height: "100%",
|
||
width: "25px",
|
||
color: "white",
|
||
fontSize: "15px",
|
||
}}
|
||
>
|
||
+
|
||
</span>
|
||
</Box>
|
||
)}
|
||
|
||
<Typography
|
||
sx={{
|
||
display: isMobile ? "none" : "block",
|
||
fontWeight: 400,
|
||
fontSize: "16px",
|
||
lineHeight: "18.96px",
|
||
color: theme.palette.grey2.main,
|
||
}}
|
||
>
|
||
Изображение
|
||
</Typography>
|
||
</Box>
|
||
<UploadImageModal
|
||
open={openImageModal}
|
||
onClose={() => setOpenImageModal(false)}
|
||
imgHC={(fileList) => {
|
||
if (fileList?.length) {
|
||
const clonContent = listQuestions[quizId][totalIndex].content;
|
||
clonContent.picture = URL.createObjectURL(fileList[0]);
|
||
updateQuestionsList(quizId, totalIndex, {
|
||
content: clonContent,
|
||
});
|
||
}
|
||
}}
|
||
// onClick={() => setOpenVideoModal(true)}
|
||
/>
|
||
<Typography> или</Typography>
|
||
<Box
|
||
sx={{
|
||
cursor: "pointer",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "10px",
|
||
}}
|
||
>
|
||
{isMobile ? (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
width: "120px",
|
||
position: "relative",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
background: "#EEE4FC",
|
||
height: "40px",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
borderTopLeftRadius: "4px",
|
||
borderBottomLeftRadius: "4px",
|
||
}}
|
||
>
|
||
<VideofileIcon
|
||
style={{
|
||
color: "#7E2AEA",
|
||
fontSize: "20px",
|
||
}}
|
||
/>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
width: "20px",
|
||
background: "#EEE4FC",
|
||
height: "40px",
|
||
color: "white",
|
||
backgroundColor: "#7E2AEA",
|
||
borderTopRightRadius: "4px",
|
||
borderBottomRightRadius: "4px",
|
||
}}
|
||
>
|
||
+
|
||
</Box>
|
||
</Box>
|
||
) : (
|
||
<Box
|
||
sx={{
|
||
width: "60px",
|
||
height: "40px",
|
||
background: "#EEE4FC",
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
}}
|
||
>
|
||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%" }}>
|
||
<VideofileIcon fontSize="22px" color="#7E2AEA" />
|
||
</Box>
|
||
<span
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
background: "#7E2AEA",
|
||
height: "100%",
|
||
width: "25px",
|
||
color: "white",
|
||
fontSize: "15px",
|
||
}}
|
||
>
|
||
+
|
||
</span>
|
||
</Box>
|
||
)}
|
||
|
||
<Typography
|
||
sx={{
|
||
display: isMobile ? "none" : "block",
|
||
fontWeight: 400,
|
||
fontSize: "16px",
|
||
lineHeight: "18.96px",
|
||
color: theme.palette.grey2.main,
|
||
}}
|
||
>
|
||
Видео
|
||
</Typography>
|
||
</Box>
|
||
<UploadVideoModal
|
||
open={openVideoModal}
|
||
onClose={() => setOpenVideoModal(false)}
|
||
video={listQuestions[quizId][totalIndex].content.video}
|
||
onUpload={(url) => {
|
||
const clonContent = listQuestions[quizId][totalIndex].content;
|
||
clonContent.video = url;
|
||
updateQuestionsList(quizId, totalIndex, { content: clonContent });
|
||
}}
|
||
/>
|
||
</Box>
|
||
</Box>
|
||
<ButtonsOptions switchState={switchState} SSHC={SSHC} totalIndex={totalIndex} />
|
||
<SwitchPageOptions switchState={switchState} totalIndex={totalIndex} />
|
||
</>
|
||
);
|
||
}
|