import AlignCenterIcon from "@icons/AlignCenterIcon";
import AlignLeftIcon from "@icons/AlignLeftIcon";
import AlignRightIcon from "@icons/AlignRightIcon";
import ArrowDown from "@icons/ArrowDownIcon";
import ArrowLeft from "@icons/ArrowLeftSP";
import LayoutCenteredIcon from "@icons/LayoutCenteredIcon";
import LayoutExpandedIcon from "@icons/LayoutExpandedIcon";
import LayoutStandartIcon from "@icons/LayoutStandartIcon";
import UploadIcon from "../../assets/icons/UploadIcon";
import MobilePhoneIcon from "@icons/MobilePhoneIcon";
import { QuizStartpageType } from "@model/quizSettings";
import InfoIcon from "@icons/InfoIcon";
import UploadBox from "@ui_kit/UploadBox";
import {
Box,
Button,
ButtonBase,
Checkbox,
FormControl,
FormControlLabel,
MenuItem,
Select,
Tooltip,
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";
})
}
>
Видео
{quiz.config.startpage.background.type === "image" &&
Изображение
{
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;
});
}}
/>
}
{quiz.config.startpage.background.type === "video" && <>
Добавить видео
{
const file = event.target.files?.[0];
if (file) {
uploadQuizImage(quiz.id, file, (quiz, url) => {
quiz.config.startpage.background.video = url;
});
// setVideo(URL.createObjectURL(file));
}
}}
hidden
accept=".mp4"
multiple
type="file"
/>
}
sx={{
height: "48px",
width: "48px",
}}
/>
{quiz.config.startpage.background.video ? : null}
}
{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;
})
}
maxLength={40}
/>
Текст
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.description = e.target.value;
})
}
maxLength={70}
/>
Текст кнопки
updateQuiz(quiz.id, (quiz) => {
quiz.config.startpage.button = e.target.value;
})
}
maxLength={15}
/>
Телефон
updateQuiz(quiz.id, (quiz) => {
quiz.config.info.phonenumber = e.target.value;
})
}
maxLength={20}
/>
updateQuiz(quiz.id, (quiz) => {
quiz.config.info.clickable = e.target.checked;
})
}
/>
Название или слоган компании
updateQuiz(quiz.id, (quiz) => {
quiz.config.info.orgname = e.target.value;
})
}
maxLength={25}
/>
Сайт
updateQuiz(quiz.id, (quiz) => {
quiz.config.info.site = e.target.value;
})
}
maxLength={25}
/>
Юридическая информация
updateQuiz(quiz.id, (quiz) => {
quiz.config.info.law = e.target.value;
})
}
maxLength={45}
/>
)}
{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 (
);
}