import { Box, Button, ButtonBase, Link, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
import YoutubeEmbedIframe from "../../ui_kit/StartPagePreview/YoutubeEmbedIframe";
import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
import { notReachable } from "../../utils/notReachable";
import { useUADevice } from "../../utils/hooks/useUADevice";
import { NameplateLogo } from "@icons/NameplateLogo";
import {modes} from "../../utils/themes/Publication/themePublication";
interface Props {
setVisualStartPage: (a: boolean) => void;
}
export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
const theme = useTheme();
const quiz = useCurrentQuiz();
const mode = modes;
const { isMobileDevice } = useUADevice();
const isMobile = useMediaQuery(theme.breakpoints.down(650));
if (!quiz) return null;
console.log(quiz);
const handleCopyNumber = () => {
navigator.clipboard.writeText(quiz.config.info.phonenumber);
};
const background =
quiz.config.startpage.background.type === "image" ? (
quiz.config.startpage.background.desktop ? (
) : null
) : quiz.config.startpage.background.type === "video" ? (
quiz.config.startpage.background.video ? (
) : null
) : null;
return (
{quiz.config.startpage.logo && (
)}
{quiz.config.info.orgname}
{quiz.config.info.site}
}
quizMainBlock={
<>
{quiz.name}
{quiz.config.startpage.description}
{quiz.config.info.clickable ? (
isMobileDevice ? (
{quiz.config.info.phonenumber}
) : (
{quiz.config.info.phonenumber}
)
) : (
{quiz.config.info.phonenumber}
)}
{quiz.config.info.law}
Сделано на PenaQuiz
}
backgroundBlock={background}
startpageType={quiz.config.startpageType}
alignType={quiz.config.startpage.position}
/>
);
};
function QuizPreviewLayoutByType({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
startpageType,
alignType,
}: {
quizHeaderBlock: JSX.Element;
quizMainBlock: JSX.Element;
backgroundBlock: JSX.Element | null;
startpageType: QuizStartpageType;
alignType: QuizStartpageAlignType;
}) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(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",
};