import { Box, Button, ButtonBase, Link, Paper, Typography, useTheme } from "@mui/material";
import { useUADevice } from "../../utils/hooks/useUADevice";
import { notReachable } from "../../utils/notReachable";
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
import { NameplateLogo } from "@icons/NameplateLogo";
import { QuizStartpageAlignType, QuizStartpageType } from "@model/settingsData";
import { useQuizData } from "@contexts/QuizDataContext";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
import { setCurrentQuizStep } from "@stores/quizView";
export const StartPageViewPublication = () => {
const theme = useTheme();
const { settings } = useQuizData();
const { isMobileDevice } = useUADevice();
const isMobile = useRootContainerSize() < 650;
const isTablet = useRootContainerSize() < 800;
const handleCopyNumber = () => {
navigator.clipboard.writeText(settings.cfg.info.phonenumber);
};
console.log(settings.cfg.startpage.background.type)
const background =
settings.cfg.startpage.background.type === "image" ? (
settings.cfg.startpage.background.desktop ? (
) : null
) : settings.cfg.startpage.background.type === "video" ? (
settings.cfg.startpage.background.video ? (
) : null
) : null;
return (
{settings.cfg.startpage.logo && (
)}
{settings.cfg.info.orgname}
{settings.cfg.info.site}
}
quizMainBlock={
<>
{settings.name}
{settings.cfg.startpage.description}
{settings.cfg.info.clickable ? (
isMobileDevice ? (
{settings.cfg.info.phonenumber}
) : (
{settings.cfg.info.phonenumber}
)
) : (
{settings.cfg.info.phonenumber}
)}
{settings.cfg.info.law}
Сделано на PenaQuiz
}
backgroundBlock={background}
startpageType={settings.cfg.startpageType}
alignType={settings.cfg.startpage.position}
/>
);
};
function QuizPreviewLayoutByType({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
startpageType,
alignType,
}: {
quizHeaderBlock: JSX.Element;
quizMainBlock: JSX.Element;
backgroundBlock: JSX.Element | null;
startpageType: QuizStartpageType;
alignType: QuizStartpageAlignType;
}) {
const isMobile = useRootContainerSize() < 650;
function StartPageMobile() {
return (
{quizHeaderBlock}
{quizMainBlock}
{backgroundBlock}
);
}
switch (startpageType) {
case null:
case "standard": {
return (
<>
{isMobile ? (
) : (
{quizHeaderBlock}
{quizMainBlock}
{backgroundBlock}
)}
);
}
case "expanded": {
return (
<>
{isMobile ? (
) : (
{quizHeaderBlock}
{quizMainBlock}
{backgroundBlock}
)
}
);
}
case "centered": {
return (
<>
{isMobile ? (
) : (
{quizHeaderBlock}
{backgroundBlock && (
{backgroundBlock}
)}
{quizMainBlock}
)
}
);
}
default:
notReachable(startpageType);
}
}
const startpageAlignTypeToJustifyContent: Record = {
left: "start",
center: "center",
right: "end",
};