import AlignCenterIcon from "@icons/AlignCenterIcon";
import AlignLeftIcon from "@icons/AlignLeftIcon";
import AlignRightIcon from "@icons/AlignRightIcon";
import ArrowDown from "@icons/ArrowDownIcon";
import LayoutCenteredIcon from "@icons/LayoutCenteredIcon";
import LayoutExpandedIcon from "@icons/LayoutExpandedIcon";
import LayoutStandartIcon from "@icons/LayoutStandartIcon";
import MobilePhoneIcon from "@icons/MobilePhoneIcon";
import { QuizStartpageType } from "@model/quizSettings";
import {
Box,
Button,
Checkbox,
FormControl,
FormControlLabel,
MenuItem,
Select,
Typography,
useMediaQuery,
useTheme
} from "@mui/material";
import { incrementCurrentStep, updateQuiz, uploadQuizImage } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import SelectableButton from "@ui_kit/SelectableButton";
import { StartPagePreview } from "@ui_kit/StartPagePreview";
import { resizeFavIcon } from "@ui_kit/reactImageFileResizer";
import { useState } from "react";
import { createPortal } from "react-dom";
import FaviconDropZone from "./FaviconDropZone";
import ModalSizeImage from "./ModalSizeImage";
import SelectableIconButton from "./SelectableIconButton";
import { DropZone } from "./dropZone";
import Extra from "./extra";
const designTypes = [
[
"standard",
(color: string) => ,
"Standard",
],
[
"expanded",
(color: string) => ,
"Expanded",
],
[
"centered",
(color: string) => ,
"Centered",
],
] as const;
// type DesignType = typeof designTypes[number][0];
export default function StartPageSettings() {
const theme = useTheme();
const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500));
const isTablet = useMediaQuery(theme.breakpoints.down(950));
const quiz = useCurrentQuiz();
const [formState, setFormState] = useState<"design" | "content">("design");
const [mobileVersion, setMobileVersion] = useState(false);
if (!quiz) return null;
const MobileVersionHC = (bool: boolean) => {
setMobileVersion(bool);
};
const designType = quiz?.config?.startpageType;
const favIconDropZoneElement = (
{
const resizedImage = await resizeFavIcon(file);
uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
quiz.config.startpage.favIcon = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.favIcon = null;
});
}}
/>
);
return (
<>
Стартовая страница
{isSmallMonitor && (
)}
{(!isSmallMonitor || (isSmallMonitor && formState === "design")) && (
Дизайн
Фон
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.background.type = "image";
})}
>
Изображение
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.background.type = "video";
})}
>
Видео
Изображение
{
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.desktop = url;
quiz.config.startpage.background.originalDesktop = url;
});
}}
onImageSaveClick={file => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.desktop = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.background.desktop = null;
});
}}
/>
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.background.video = e.target.value;
})}
/>
{designType !== "centered" &&
<>
Расположение элементов
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.position = "left";
})}
isActive={quiz.config.startpage.position === "left"}
Icon={AlignLeftIcon}
/>
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.position = "center";
})}
isActive={quiz.config.startpage.position === "center"}
Icon={AlignCenterIcon}
sx={{ display: designType === "standard" ? "none" : "flex" }}
/>
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.position = "right";
})}
isActive={quiz.config.startpage.position === "right"}
Icon={AlignRightIcon}
/>
}
{(isTablet || !isSmallMonitor) && (
<>
Логотип
{
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
quiz.config.startpage.originalLogo = url;
});
}}
onImageSaveClick={file => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.logo = null;
});
}}
/>
Favicon
{favIconDropZoneElement}
)}
)}
{/*Правая сторона*/}
{!isTablet && isSmallMonitor && formState === "design" && (
<>
Логотип
{
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
quiz.config.startpage.originalLogo = url;
});
}}
onImageSaveClick={file => {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.logo = url;
});
}}
onDeleteClick={() => {
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.logo = null;
});
}}
/>
Favicon
{favIconDropZoneElement}
)}
{(!isSmallMonitor || (isSmallMonitor && formState === "content")) && (
<>
Заголовок
updateQuiz(quiz.id, quiz => {
quiz.name = e.target.value;
})}
/>
Текст
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.description = e.target.value;
})}
/>
Текст кнопки
updateQuiz(quiz.id, quiz => {
quiz.config.startpage.button = e.target.value;
})}
/>
Телефон
updateQuiz(quiz.id, quiz => {
quiz.config.info.phonenumber = e.target.value;
})}
/>
updateQuiz(quiz.id, quiz => {
quiz.config.info.clickable = e.target.checked;
})}
/>
Название или слоган компании
updateQuiz(quiz.id, quiz => {
quiz.config.info.orgname = e.target.value;
})}
/>
Сайт
updateQuiz(quiz.id, quiz => {
quiz.config.info.site = e.target.value;
})}
/>
Юридическая информация
updateQuiz(quiz.id, quiz => {
quiz.config.info.law = e.target.value;
})}
/>
)}
{isSmallMonitor && (
{formState === "content" && (
)}
{formState === "design" && (
)}
)}
Отключить стартовую страницу
}
checkedIcon={
}
sx={{
borderRadius: 0,
padding: 0,
}}
onChange={e => updateQuiz(quiz.id, quiz => {
quiz.config.noStartPage = e.target.checked;
})}
checked={quiz.config.noStartPage}
/>
}
label=""
sx={{
color: theme.palette.brightPurple.main,
margin: "0",
userSelect: "none",
justifyContent: "flex-end",
}}
/>
{createPortal(, document.body)}
);
}
function IconCheck() {
return (
);
}