import {
Box,
Button,
ButtonBase,
Checkbox,
FormControl, FormControlLabel,
Link,
MenuItem,
Select,
Typography,
useTheme
} from "@mui/material";
import { useState } from "react";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import AlignLeftIcon from "../../assets/icons/AlignLeftIcon";
import AlignRightIcon from "../../assets/icons/AlignRightIcon";
import ArrowDown from "../../assets/icons/ArrowDownIcon";
import InfoIcon from "../../assets/icons/InfoIcon";
import LayoutCenteredIcon from "../../assets/icons/LayoutCenteredIcon";
import LayoutExpandedIcon from "../../assets/icons/LayoutExpandedIcon";
import LayoutStandartIcon from "../../assets/icons/LayoutStandartIcon";
import MobilePhoneIcon from "../../assets/icons/MobilePhoneIcon";
import UploadIcon from "../../assets/icons/UploadIcon";
import SelectableButton from "@ui_kit/SelectableButton";
import SelectableIconButton from "./SelectableIconButton";
import UploadBox from "@ui_kit/UploadBox";
import CustomTextField from "@ui_kit/CustomTextField";
import {quizStore} from "@root/quizes";
import {useParams} from "react-router-dom";
import * as React from "react";
import ModalSizeImage from "./ModalSizeImage";
import DropZone from "./dropZone";
const designTypes = [
["standard", (color: string) => , "Standard"],
["expanded", (color: string) => , "Expanded"],
["centered", (color: string) => , "Centered"]
] as const;
// type DesignType = typeof designTypes[number][0];
type BackgroundType = "image" | "video";
type AlignType = "left" | "right";
export default function StartPageSettings() {
const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore();
const params = Number(useParams().quizId);
const theme = useTheme();
const designType = listQuizes[params].startpage
const StartPageClone = listQuizes[params]
console.log(StartPageClone)
const [backgroundType, setBackgroundType] = useState(listQuizes[params].config.startpage.background.type);
const [alignType, setAlignType] = useState("left");
//дропзона
//для Изображения
const imgHC = (imgInp:any) => {
const [file] = imgInp.files
setImg(URL.createObjectURL(file))
}
const [img, setImg] = React.useState("");
const dropZone = React.useRef(null);
const [ready, setReady] = React.useState(false);
const dragenterHC = () => {
console.log("a")
setReady(true)
}
const dragexitHC = () => {
setReady(false)
}
const ondropHC = (event: any) => {
event.preventDefault()
const file = event.dataTransfer.files[0]
console.log(event.dataTransfer.files[0])
setImg(URL.createObjectURL(file))
setReady(false)
}
const ondragOverHC = (event: any) => {
event.preventDefault()
console.log(event)
}
React.useEffect(() => {
dropZone.current.addEventListener("dragenter", dragenterHC)
dropZone.current.addEventListener("dragexit", dragexitHC)
dropZone.current.addEventListener("dragover", ondragOverHC)
dropZone.current.addEventListener("drop", ondropHC)
console.log(dropZone.current)
},)
//для Логотипа
const logoHC = (imgInp:any) => {
const [fileL] = imgInp.files
setLogo(URL.createObjectURL(fileL))
}
const [logo, setLogo] = React.useState("");
const dropZoneLogo = React.useRef(null);
const [readyLogo, setReadyLogo] = React.useState(false);
const dragenterLogoHC = () => {
console.log("b")
setReadyLogo(true)
}
const dragexitLogoHC = () => {
setReadyLogo(false)
}
const ondropLogoHC = (event: any) => {
event.preventDefault()
const fileL = event.dataTransfer.files[0]
console.log(event.dataTransfer.files[0])
setLogo(URL.createObjectURL(fileL))
setReadyLogo(false)
}
const ondragOverLogoHC = (event: any) => {
event.preventDefault()
console.log(event)
}
React.useEffect(() => {
dropZoneLogo.current.addEventListener("dragenter", dragenterLogoHC)
dropZoneLogo.current.addEventListener("dragexit", dragexitLogoHC)
dropZone.current.addEventListener("dragover", ondragOverLogoHC)
dropZone.current.addEventListener("drop", ondropLogoHC)
console.log(dropZoneLogo.current)
},)
// для фавиконки
const favHC = (imgInp:any) => {
const [file] = imgInp.files
setFav(URL.createObjectURL(file))
}
const [fav, setFav] = React.useState("");
const dropZoneFav = React.useRef(null);
const [readyFav, setReadyFav] = React.useState(false);
const dragenterFavHC = () => {
console.log("c")
setReadyFav(true)
}
const dragexitFavHC = () => {
setReadyFav(false)
}
React.useEffect(() => {
// if (dropZoneFav.current) {
dropZoneFav.current.addEventListener("dragenter", dragenterFavHC)
dropZoneFav.current.addEventListener("dragexit", dragexitFavHC)
console.log(dropZoneFav.current)
// }
// return () => {dropZoneFav.current.removeEventListener("dragenter", dragenterFavHC)
// dropZoneFav.current.removeEventListener("dragexit", dragenterFavHC)
// }
},)
//изображение для мобильной версии
const mobileImgHC = (imgInp:any) => {
const [file] = imgInp.files
setMobileImg(URL.createObjectURL(file))
}
const [mobileImg, setMobileImg] = React.useState("");
const dropZoneMobile = React.useRef(null);
const [readyMobile, setReadyMobile] = React.useState(false);
const dragenterMobileHC = () => {
console.log("d")
setReadyMobile(true)
}
const dragexitMobileHC = () => {
setReadyMobile(false)
}
React.useEffect(() => {
// if (dropZoneMobile.current) {
dropZoneMobile.current.addEventListener("dragenter", dragenterMobileHC)
dropZoneMobile.current.addEventListener("dragexit", dragexitMobileHC)
console.log(dropZoneMobile.current)
// }
// return () => {dropZoneMobile.current.removeEventListener("dragenter", dragenterMobileHC)
// dropZoneMobile.current.removeEventListener("dragexit", dragexitMobileHC)
// }
},)
// для видео
const videoHC = (videoInp:any) => {
const [file] = videoInp.files
setVideo(URL.createObjectURL(file))
}
const [video, setVideo] = React.useState("");
const mutationHC = (e: any) => {
let SPageClone = listQuizes[params].config
SPageClone.startpage.description = e.target.value
updateQuizesList(params, {config: SPageClone })
}
const mutationButtonHC = (e: any) => {
let SPageClone = listQuizes[params].config
SPageClone.startpage.button = e.target.value
updateQuizesList(params, {config: SPageClone })
}
const mutationPhoneHC = (e: any) => {
let SPageClone = listQuizes[params].config
SPageClone.info.phonenumber = e.target.value
updateQuizesList(params, {config: SPageClone })
}
const mutationSiteHC = (e: any) => {
let SPageClone = listQuizes[params].config
SPageClone.info.site = e.target.value
updateQuizesList(params, {config: SPageClone })
}
const mutationLawHC = (e: any) => {
let SPageClone = listQuizes[params].config
SPageClone.info.law = e.target.value
updateQuizesList(params, {config: SPageClone })
}
const mutationOrgNameHC = (e: any) => {
let SPageClone = listQuizes[params].config
SPageClone.info.orgname = e.target.value
updateQuizesList(params, {config: SPageClone })
}
const mutationOrgMetaHC = (e: any) => {
let SPageClone = listQuizes[params].config
SPageClone.meta = e.target.value
updateQuizesList(params, {config: SPageClone })
}
return (
<>
Стартовая страница
Дизайн
Фон
{
setBackgroundType("image")
let SPageClone = listQuizes[params].config
SPageClone.startpage.background.type = "image"
updateQuizesList(params, {config: SPageClone })
}}>
Изображение
{
setBackgroundType("video")
let SPageClone = listQuizes[params].config
SPageClone.startpage.background.type = "video"
updateQuizesList(params, {config: SPageClone })
}}>
Видео
Изображение
imgHC(event.target)} hidden accept="image/*" multiple type="file" />
{/*} text="5 MB максимум" ref={dropZone} />*/}
5 MB максимум
{img ?
:
null
}
}
checkedIcon={}
/>}
label= "мобильная версия"
sx={{
color: theme.palette.brightPurple.main,
textDecorationLine: "underline",
textDecorationColor: theme.palette.brightPurple.main,
ml: "-9px",
userSelect: "none",
}}
/>
Добавить видео
videoHC(event.target) } hidden accept=".mp4" multiple type="file" />
}
sx={{
height: "48px",
width: "48px",
marginBottom: "20px"
}}
/>
{video ?
:
null
}
Настройки видео
{
let SPageClone = listQuizes[params].config
SPageClone.startpage.background.cycle = e.target.checked
updateQuizesList(params, {config: SPageClone })}}
/>
Изображение для мобильной версии
mobileImgHC(event.target)} hidden accept="image/*" multiple type="file" />
5 MB максимум
{mobileImg ?
:
null
}
Расположение элементов
setAlignType("left")} isActive={alignType === "left"} Icon={AlignLeftIcon} />
setAlignType("right")} isActive={alignType === "right"} Icon={AlignRightIcon} />
Логотип
logoHC(event.target) } hidden accept="image/*" multiple type="file" />
5 MB максимум
{logo ?
:
null
}
Favicon
favHC(event.target)} hidden accept="image/*" multiple type="file" />
{fav ?
:
null
}
5 MB максимум
{/*Правая сторона*/}
Заголовок
updateQuizesList(params, {name: e.target.value})}
/>
Текст
Текст кнопки
Телефон
{console.log(e.target.checked)
let SPageClone = listQuizes[params].config
SPageClone.info.clickable = e.target.checked
updateQuizesList(params, {config: SPageClone })}
}/>
Название или слоган компании
Сайт
Юридическая информация
Дополнительно
Mета заголовок
Текст-заполнитель —
это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполнитель
);
}
function IconCheck() {
return (
);
}