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";

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"],
];
export const DesignFilling = () => {
  const quiz = useCurrentQuiz();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(830));

  return (
    <Box sx={{ width: "100%", padding: "25px", height: "calc(100vh - 80px)" }}>
      <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",
          height: "calc(100vh - 280px)",
          overflow: "auto",
        }}
      >
        <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>
  );
};