frontPanel/src/pages/DesignPage/DesignFilling.tsx

import {Box, ButtonBase, IconButton, Paper, Typography, useMediaQuery, useTheme} from "@mui/material";
import ColorRingIcon from "./ColorRingIcon";
import {updateQuiz} from "@root/quizes/actions";
import {useCurrentQuiz} from "@root/quizes/hooks";
import {toggleQuizPreview} from "@root/quizPreview";
import VisibilityIcon from "@mui/icons-material/Visibility";
import React from "react";

export const DesignFilling = () => {
    const quiz = useCurrentQuiz();
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down(830));
    const ButtonsThemeLight = [
        ["Стандартный", "StandardTheme", "#7E2AEA", "#FFFFFF"],
        ["Черно-белый", "BlackWhiteTheme", "#4E4D51", "#FFFFFF"],
        ["Оливковый", "OliveTheme", "#758E4F", "#F9FBF1"],
        ["Фиолетовый", "PurpleTheme", "#7E2AEA", "#FBF8FF"],
        ["Желтый", "YellowTheme", "#F2B133", "#FFFCF6"],
        ["Голубой", "BlueTheme", "#4964ED", "#F5F7FF"],
        ["Розовый", "PinkTheme", "#D34085", "#FFF9FC"]
    ]
    const ButtonsThemeDark = [
        ["Стандартный", "StandardDarkTheme", "#7E2AEA", "#FFFFFF"],
        ["Золотой", "GoldDarkTheme", "#E6AA37", "#FFFFFF"],
        ["Розовый", "PinkDarkTheme", "#D34085", "#FFFFFF"],
        ["Бирюзовый", "BlueDarkTheme", "#07A0C3", "#FFFFFF"],
    ]
    return (
        <Box sx={{width: "100%", padding: "25px"}}>
            <Typography variant="h5" sx={{marginBottom: "40px", color: "#333647"}}>Дизайн</Typography>
            <Typography sx={{marginBottom: "30px", color: "#333647"}}>Выберите цветовую схему для вашего опроса</Typography>
            <Paper sx={{
                padding: "20px",
                maxWidth: "796px",
                width: "100%",
                display: "flex",
                gap: "20px",
                borderRadius: "12px",
                flexWrap: "wrap"
            }}>
                <Box
                    sx={{width: isMobile ? "100%" : "48%", display: "flex", flexDirection: "column", gap: "12px"}}
                >
                    <Typography color={"#9A9AAF"}>Со светлым фоном</Typography>

                    {ButtonsThemeLight.map((e, i) => (
                        <ButtonBase
                            sx={{
                                maxWidth: "368px",
                                width: "100%",
                                padding: "22px 21px",
                                background: quiz.config.theme == e[1] ? "linear-gradient(0deg, rgba(126, 42, 234, 0.10) 0%, rgba(126, 42, 234, 0.10) 100%)" : "#F2F3F7",
                                borderRadius: "12px",
                                justifyContent: "space-between",
                                border: quiz.config.theme == e[1] ? "1px solid #7E2AEA" : "none"
                            }}
                            key={i}
                            value={e[1]}
                            onClick={() => updateQuiz(quiz.id, (quiz) => {
                                quiz.config.theme = e[1]})}
                        >
                            <Typography color={"#4D4D4D"}>{e[0]}</Typography>
                            <Box sx={{display: "flex", gap: "7px",}}>
                                <ColorRingIcon color={e[2]}/>
                                <ColorRingIcon/>
                                <ColorRingIcon color={e[3]}/>
                            </Box>
                        </ButtonBase>
                    ))}

                </Box>
                <Box
                    sx={{width: isMobile ? "100%" : "48%", display: "flex", flexDirection: "column", gap: "12px"}}
                >
                    <Typography color={"#9A9AAF"}>С тёмным фоном</Typography>
                    {ButtonsThemeDark.map((e, i) => (
                        <ButtonBase
                            sx={{
                                maxWidth: "368px",
                                width: "100%",
                                padding: "22px 21px",
                                background: quiz.config.theme == e[1] ? "linear-gradient(0deg, rgba(126, 42, 234, 0.10) 0%, rgba(126, 42, 234, 0.10) 100%)" : "#F2F3F7",
                                borderRadius: "12px",
                                justifyContent: "space-between",
                                border: quiz.config.theme == e[1] ? "1px solid #7E2AEA" : "none"
                            }}
                            key={i}
                            value={e[1]}
                            onClick={() => updateQuiz(quiz.id, (quiz) => {
                                quiz.config.theme = e[1]})}
                        >
                            <Typography color={"#4D4D4D"}>{e[0]}</Typography>
                            <Box sx={{display: "flex", gap: "7px",}}>
                                <ColorRingIcon color={e[2]}/>
                                <ColorRingIcon color={e[3]}/>
                                <ColorRingIcon />
                            </Box>
                        </ButtonBase>
                    ))}

                </Box>
            </Paper>
            <Box sx={{textAlign: "end"}}>
                <IconButton
                    onClick={toggleQuizPreview}
                    sx={{
                        pointerEvents: "auto",
                        marginLeft: "auto",
                        position: "relative",
                        zIndex: "999999",
                        alignItems: "end"
                    }}
                >
                    <VisibilityIcon sx={{ height: "30px", width: "30px" }} />
                </IconButton>
            </Box>
        </Box>
    );
}