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";
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("image");
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)
}
React.useEffect(() => {
if (dropZone.current) {
dropZone.current.addEventListener("dragenter", dragenterHC)
console.log(dropZone.current)
}
return () => {dropZone.current.removeEventListener("dragenter", dragenterHC)}
},)
//для Логотипа
const logoHC = (imgInp:any) => {
const [file] = imgInp.files
setLogo(URL.createObjectURL(file))
}
const [logo, setLogo] = React.useState("");
const dropZoneLogo = React.useRef(null);
const [readyLogo, setReadyLogo] = React.useState(false);
const dragenterLogoHC = () => {
console.log("b")
setReadyLogo(true)
}
React.useEffect(() => {
if (dropZoneLogo.current) {
dropZoneLogo.current.addEventListener("dragenter", dragenterLogoHC)
console.log(dropZoneLogo.current)
}
return () => {dropZoneLogo.current.removeEventListener("dragenter", dragenterLogoHC)}
},)
// для фавиконки
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)
}
React.useEffect(() => {
if (dropZoneFav.current) {
dropZoneFav.current.addEventListener("dragenter", dragenterFavHC)
console.log(dropZoneFav.current)
}
return () => {dropZoneFav.current.removeEventListener("dragenter", 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)
}
React.useEffect(() => {
if (dropZoneMobile.current) {
dropZoneMobile.current.addEventListener("dragenter", dragenterMobileHC)
console.log(dropZoneMobile.current)
}
return () => {dropZoneMobile.current.removeEventListener("dragenter", dragenterMobileHC)}
},)
// для видео
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].config1
SPageClone.startpage.description = e.target.value
updateQuizesList(params, {config1: SPageClone })
}
const mutationButtonHC = (e: any) => {
let SPageClone = listQuizes[params].config1
SPageClone.startpage.button = e.target.value
updateQuizesList(params, {config1: SPageClone })
}
const mutationPhoneHC = (e: any) => {
let SPageClone = listQuizes[params].config1
SPageClone.info.phonenumber = e.target.value
updateQuizesList(params, {config1: SPageClone })
}
const mutationSiteHC = (e: any) => {
let SPageClone = listQuizes[params].config1
SPageClone.info.site = e.target.value
updateQuizesList(params, {config1: SPageClone })
}
const mutationLawHC = (e: any) => {
let SPageClone = listQuizes[params].config1
SPageClone.info.law = e.target.value
updateQuizesList(params, {config1: SPageClone })
}
const mutationOrgNameHC = (e: any) => {
let SPageClone = listQuizes[params].config1
SPageClone.info.orgname = e.target.value
updateQuizesList(params, {config1: SPageClone })
}
const mutationOrgMetaHC = (e: any) => {
let SPageClone = listQuizes[params].config1
SPageClone.meta = e.target.value
updateQuizesList(params, {config1: SPageClone })
}
return (
<>
Стартовая страница
Дизайн
Фон
{
setBackgroundType("image")
let SPageClone = listQuizes[params].config1
SPageClone.startpage.background.type = "image"
updateQuizesList(params, {config1: SPageClone })
}}>
Изображение
{
setBackgroundType("video")
let SPageClone = listQuizes[params].config1
SPageClone.startpage.background.type = "video"
updateQuizesList(params, {config1: 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].config1
SPageClone.startpage.background.cycle = e.target.checked
updateQuizesList(params, {config1: 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].config1
SPageClone.info.clickable = e.target.checked
updateQuizesList(params, {config1: SPageClone })}
}/>
Название или слоган компании
Сайт
Юридическая информация
Дополнительно
Mета заголовок
Текст-заполнитель —
это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполнитель —
это текст, который имеет Текст-заполнитель
);
}
function IconCheck() {
return (
);
}