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 { QuizStartpageType } from "@model/quizSettings";
import InfoIcon from "@icons/InfoIcon";
import UploadBox from "@ui_kit/UploadBox";
import UploadIcon from "@/assets/icons/UploadIcon";
import CustomizedSwitch from "@ui_kit/CustomSwitch";

import {
  Box,
  Button,
  ButtonBase,
  Checkbox,
  FormControl,
  FormControlLabel,
  MenuItem,
  Select,
  Skeleton,
  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";
import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
import { VideoElement } from "./VideoElement";
import UploadVideoModal from "../Questions/UploadVideoModal";
import { SwitchAI } from "@/ui_kit/crutchFunctionAI";

const designTypes = [
  ["standard", (color: string) => <LayoutStandartIcon color={color} />, "Standard"],
  ["expanded", (color: string) => <LayoutExpandedIcon color={color} />, "Expanded"],
  ["centered", (color: string) => <LayoutCenteredIcon color={color} />, "Centered"],
] as const;

export default function StartPageSettings() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(650));
  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);
  const [faviconUploding, setFaviconUploading] = useState<boolean>(false);
  const [backgroundUploding, setBackgroundUploading] = useState<boolean>(false);
  const [logoUploding, setLogoUploading] = useState<boolean>(false);
  const [isVideoUploadDialogOpen, setIsVideoUploadDialogOpen] = useState<boolean>(false);

  if (!quiz) return null;

  async function handleVideoUpload(videoUrl: string) {
    if (!quiz) return;

    setBackgroundUploading(true);

    if (videoUrl.startsWith("blob:")) {
      const videoBlob = await (await fetch(videoUrl)).blob();
      uploadQuizImage(quiz.id, videoBlob, (quiz, url) => {
        quiz.config.startpage.background.video = url;
      });
    } else {
      updateQuiz(quiz.id, (quiz) => {
        quiz.config.startpage.background.video = videoUrl;
      });
    }

    setBackgroundUploading(false);
  }

  const designType = quiz?.config?.startpageType;
  let cropAspectRatio:
    | undefined
    | {
      width: number;
      height: number;
    };
  switch (designType) {
    case "standard":
      cropAspectRatio = { width: 1680.8, height: 960.5 };
      break;
    case "expanded":
      cropAspectRatio = { width: 1965.5, height: 1200 };
      break;
    case "centered":
      cropAspectRatio = { width: 844, height: 306 };
      break;
  }

  const favIconDropZoneElement = faviconUploding ? (
    <Skeleton sx={{ width: "48px", height: "48px", transform: "none" }} />
  ) : (
    <FaviconDropZone
      imageUrl={quiz.config.startpage.favIcon}
      onImageUploadClick={async (file) => {
        setFaviconUploading(true);
        const resizedImage = await resizeFavIcon(file);

        await uploadQuizImage(quiz.id, resizedImage, (quiz, url) => {
          quiz.config.startpage.favIcon = url;
        });

        setFaviconUploading(false);
      }}
      onDeleteClick={() => {
        updateQuiz(quiz.id, (quiz) => {
          quiz.config.startpage.favIcon = null;
        });
      }}
    />
  );

  return (
    <>
      <UploadVideoModal
        open={isVideoUploadDialogOpen}
        onClose={() => setIsVideoUploadDialogOpen(false)}
        onUpload={handleVideoUpload}
        video={quiz.config.startpage.background.video}
      />
      <Typography
        variant="h5"
        sx={{ marginTop: "60px", marginBottom: isSmallMonitor ? "0" : "40px" }}
      >
        Стартовая страница
      </Typography>
      {isSmallMonitor && (
        <Box sx={{ display: "flex", gap: "5px", margin: "20px 0px 10px" }}>
          <Button onClick={() => setFormState("design")}>
            <Typography
              sx={{
                fontWeight: 500,
                fontSize: "16px",
                color: formState === "design" ? "#7E2AEA" : "#7D7E86",
                borderBottom: formState === "design" ? "2px solid #7E2AEA" : "1px solid transparent",
              }}
            >
              Дизайн
            </Typography>
          </Button>
          <Button
            id="contentButton"
            onClick={() => setFormState("content")}
          >
            <Typography
              sx={{
                fontWeight: 500,
                fontSize: "16px",
                color: formState === "content" ? "#7E2AEA" : "#7D7E86",
                borderBottom: formState === "content" ? "2px solid #7E2AEA" : "1px solid transparent",
              }}
            >
              Контент
            </Typography>
          </Button>
        </Box>
      )}
      <Box
        sx={{
          boxSizing: "border-box",
          backgroundColor: "white",
          borderRadius: "12px",
          p: "20px",
          display: "flex",
          gap: "20px",
          maxWidth: "1160px",
          width: "100%",
          boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
                        0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
                        0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
                        0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
                        0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
                        0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
        }}
      >
        {(!isSmallMonitor || (isSmallMonitor && formState === "design")) && (
          <Box
            sx={{
              pr: "20px",
              borderRight: `1px solid ${isTablet ? "transparent" : theme.palette.grey2.main}`,
              display: "flex",
              flexDirection: "column",
              flex: `1 1 361px`,
            }}
          >
            <Typography
              sx={{
                fontWeight: 500,
                color: theme.palette.grey3.main,
                mb: "14px",
              }}
            >
              Дизайн
            </Typography>
            <FormControl
              fullWidth
              size="small"
              sx={{
                width: "100%",
                minWidth: "200px",
                height: "48px",
              }}
            >
              <Select
                id="category-select"
                variant="outlined"
                value={designType}
                displayEmpty
                onChange={(e) =>
                  updateQuiz(quiz.id, (quiz) => {
                    quiz.config.startpageType = e.target.value as QuizStartpageType;
                  })
                }
                sx={{
                  height: "48px",
                  borderRadius: "8px",
                  "& .MuiOutlinedInput-notchedOutline": {
                    border: `1px solid ${theme.palette.brightPurple.main} !important`,
                  },
                }}
                MenuProps={{
                  PaperProps: {
                    sx: {
                      mt: "8px",
                      p: "4px",
                      borderRadius: "8px",
                      border: "1px solid #EEE4FC",
                      boxShadow: "0px 8px 24px rgba(210, 208, 225, 0.4)",
                    },
                  },
                  MenuListProps: {
                    sx: {
                      py: 0,
                      display: "flex",
                      flexDirection: "column",
                      gap: "8px",
                      "& .Mui-selected": {
                        backgroundColor: theme.palette.background.default,
                        color: theme.palette.brightPurple.main,
                      },
                    },
                  },
                }}
                inputProps={{
                  sx: {
                    color: theme.palette.brightPurple.main,
                    display: "flex",
                    alignItems: "center",
                    px: "9px",
                    gap: "20px",
                  },
                }}
                IconComponent={(props) => <ArrowDown {...props} />}
              >
                {designTypes.map((type) => (
                  <MenuItem
                    key={type[0]}
                    value={type[0]}
                    sx={{
                      display: "flex",
                      alignItems: "center",
                      gap: "20px",
                      p: "4px",
                      borderRadius: "5px",
                      color: theme.palette.grey2.main,
                    }}
                  >
                    {type[1](type[0] === designType ? theme.palette.orange.main : theme.palette.grey2.main)}
                    {type[2]}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
            <Typography
              sx={{
                fontWeight: 500,
                color: theme.palette.grey3.main,
                mt: "20px",
                mb: "14px",
              }}
            >
              Фон
            </Typography>
            <Box
              sx={{
                display: "flex",
                gap: "10px",
              }}
            >
              <SelectableButton
                isSelected={quiz.config.startpage.background.type === "image"}
                onClick={() =>
                  updateQuiz(quiz.id, (quiz) => {
                    quiz.config.startpage.background.type = "image";
                  })
                }
              >
                Изображение
              </SelectableButton>
              <SelectableButton
                isSelected={quiz.config.startpage.background.type === "video"}
                onClick={() =>
                  updateQuiz(quiz.id, (quiz) => {
                    quiz.config.startpage.background.type = "video";
                  })
                }
              >
                Видео
              </SelectableButton>
            </Box>

            {quiz.config.startpage.background.type === "image" && (
              <Box
                sx={{
                  display: quiz.config.startpage.background.type === "image" ? "flex" : "none",
                  flexDirection: "column",
                }}
              >
                <Box
                  sx={{
                    display: mobileVersion ? "none" : "flex",
                    flexDirection: "column",
                  }}
                >
                  <Typography
                    sx={{
                      fontWeight: 500,
                      color: theme.palette.grey3.main,
                      mt: "20px",
                      mb: "14px",
                    }}
                  >
                    Изображение
                  </Typography>
                  {backgroundUploding ? (
                    <Skeleton
                      sx={{
                        width: "300px",
                        height: "120px",
                        transform: "none",
                      }}
                    />
                  ) : (
                    <DropZone
                      text={"5 MB максимум"}
                      sx={{ maxWidth: "300px" }}
                      cropAspectRatio={cropAspectRatio}
                      imageUrl={quiz.config.startpage.background.desktop}
                      originalImageUrl={quiz.config.startpage.background.originalDesktop}
                      onImageUploadClick={async (file) => {
                        setBackgroundUploading(true);
                        await uploadQuizImage(quiz.id, file, (quiz, url) => {
                          quiz.config.startpage.background.desktop = url;
                          quiz.config.startpage.background.originalDesktop = url;
                        });

                        setBackgroundUploading(false);
                      }}
                      onImageSaveClick={async (file) => {
                        setBackgroundUploading(true);
                        await uploadQuizImage(quiz.id, file, (quiz, url) => {
                          quiz.config.startpage.background.desktop = url;
                        });

                        setBackgroundUploading(false);
                      }}
                      onDeleteClick={() => {
                        updateQuiz(quiz.id, (quiz) => {
                          quiz.config.startpage.background.desktop = null;
                        });
                      }}
                    />
                  )}
                </Box>

                <ModalSizeImage />
              </Box>
            )}

            {quiz.config.startpage.background.type === "video" && (
              <>
                {!quiz.config.startpage.background.video ? (
                  <>
                    <Box
                      sx={{
                        display: "flex",
                        alignItems: "center",
                        gap: "7px",
                        mt: "20px",
                        mb: "14px",
                      }}
                    >
                      <Typography
                        sx={{
                          fontWeight: 500,
                          color: theme.palette.grey3.main,
                        }}
                      >
                        Добавить видео
                      </Typography>
                      {isMobile ? (
                        <TooltipClickInfo title={"Можно загрузить видео."} />
                      ) : (
                        <Tooltip
                          title="Можно загрузить видео."
                          placement="top"
                        >
                          <Box>
                            <InfoIcon />
                          </Box>
                        </Tooltip>
                      )}
                    </Box>
                    {backgroundUploding ? (
                      <Skeleton
                        sx={{
                          width: "48px",
                          height: "48px",
                          transform: "none",
                          margin: "20px 0",
                        }}
                      />
                    ) : (
                      <>
                        <ButtonBase
                          onClick={() => setIsVideoUploadDialogOpen(true)}
                          sx={{
                            justifyContent: "center",
                            height: "48px",
                            width: "48px",
                            display: "flex",
                            alignItems: "center",
                            my: "20px",
                          }}
                        >
                          <UploadBox
                            icon={<UploadIcon />}
                            sx={{
                              height: "48px",
                              width: "48px",
                            }}
                          />
                        </ButtonBase>
                      </>
                    )}
                  </>
                ) : (
                  <Box sx={{ marginTop: "20px" }}>
                    <VideoElement
                      videoSrc={quiz.config.startpage.background.video}
                      theme={theme}
                      onDeleteClick={() => {
                        updateQuiz(quiz.id, (quiz) => {
                          quiz.config.startpage.background.video = null;
                        });
                      }}
                    />
                  </Box>
                )}
              </>
            )}
            {designType !== "centered" && (
              <>
                <Typography
                  sx={{
                    fontWeight: 500,
                    color: theme.palette.grey3.main,
                    mt: "20px",
                    mb: "14px",
                  }}
                >
                  Расположение элементов
                </Typography>
                <Box
                  sx={{
                    display: "flex",
                    gap: "10px",
                  }}
                >
                  <SelectableIconButton
                    onClick={() =>
                      updateQuiz(quiz.id, (quiz) => {
                        quiz.config.startpage.position = "left";
                      })
                    }
                    isActive={quiz.config.startpage.position === "left"}
                    Icon={AlignRightIcon}
                  />
                  <SelectableIconButton
                    onClick={() =>
                      updateQuiz(quiz.id, (quiz) => {
                        quiz.config.startpage.position = "center";
                      })
                    }
                    isActive={quiz.config.startpage.position === "center"}
                    Icon={AlignCenterIcon}
                    sx={{
                      display: designType === "standard" ? "none" : "flex",
                    }}
                  />
                  <SelectableIconButton
                    onClick={() =>
                      updateQuiz(quiz.id, (quiz) => {
                        quiz.config.startpage.position = "right";
                      })
                    }
                    isActive={quiz.config.startpage.position === "right"}
                    Icon={AlignLeftIcon}
                  />
                </Box>
              </>
            )}
            {(isTablet || !isSmallMonitor) && (
              <>
                <Box
                  sx={{
                    display: quiz.config.startpage.background.type === "image" ? "flex" : "none",
                    flexDirection: "column",
                  }}
                >
                  <Typography
                    sx={{
                      fontWeight: 500,
                      color: theme.palette.grey3.main,
                      margin: "20px 0",
                    }}
                  >
                    Логотип
                  </Typography>
                  {logoUploding ? (
                    <Skeleton
                      sx={{
                        width: "300px",
                        height: "120px",
                        transform: "none",
                      }}
                    />
                  ) : (
                    <DropZone
                      text={"5 MB максимум"}
                      sx={{ maxWidth: "300px" }}
                      imageUrl={quiz.config.startpage.logo}
                      originalImageUrl={quiz.config.startpage.originalLogo}
                      onImageUploadClick={async (file) => {
                        setLogoUploading(true);
                        await uploadQuizImage(quiz.id, file, (quiz, url) => {
                          quiz.config.startpage.logo = url;
                          quiz.config.startpage.originalLogo = url;
                        });

                        setLogoUploading(false);
                      }}
                      onImageSaveClick={async (file) => {
                        setLogoUploading(true);
                        await uploadQuizImage(quiz.id, file, (quiz, url) => {
                          quiz.config.startpage.logo = url;
                        });

                        setLogoUploading(false);
                      }}
                      onDeleteClick={() => {
                        updateQuiz(quiz.id, (quiz) => {
                          quiz.config.startpage.logo = null;
                        });
                      }}
                    />
                  )}
                </Box>

                <Typography
                  sx={{
                    fontWeight: 500,
                    color: theme.palette.grey3.main,
                    mt: "20px",
                    mb: "14px",
                  }}
                >
                  Favicon
                </Typography>
                {favIconDropZoneElement}
                {isSmallMonitor && <SwitchAI />}
              </>
            )}
          </Box>
        )}
        <Box
          sx={{
            display: isTablet && formState === "design" ? "none" : "flex",
            flexDirection: "column",
            flex: `1 1 795px`,
          }}
        >
          {!isTablet && isSmallMonitor && formState === "design" && (
            <>
              <Box
                sx={{
                  display: quiz.config.startpage.background.type === "image" ? "flex" : "none",
                  flexDirection: "column",
                }}
              >
                <Typography
                  sx={{
                    fontWeight: 500,
                    color: theme.palette.grey3.main,
                    marginBottom: "15px",
                  }}
                >
                  Логотип
                </Typography>
                {logoUploding ? (
                  <Skeleton
                    sx={{
                      width: "300px",
                      height: "120px",
                      transform: "none",
                    }}
                  />
                ) : (
                  <DropZone
                    text={"5 MB максимум"}
                    sx={{ maxWidth: "300px" }}
                    imageUrl={quiz.config.startpage.logo}
                    originalImageUrl={quiz.config.startpage.originalLogo}
                    onImageUploadClick={async (file) => {
                      setLogoUploading(true);
                      await uploadQuizImage(quiz.id, file, (quiz, url) => {
                        quiz.config.startpage.logo = url;
                        quiz.config.startpage.originalLogo = url;
                      });

                      setLogoUploading(false);
                    }}
                    onImageSaveClick={async (file) => {
                      setLogoUploading(true);
                      await uploadQuizImage(quiz.id, file, (quiz, url) => {
                        quiz.config.startpage.logo = url;
                      });

                      setLogoUploading(false);
                    }}
                    onDeleteClick={() => {
                      updateQuiz(quiz.id, (quiz) => {
                        quiz.config.startpage.logo = null;
                      });
                    }}
                  />
                )}
              </Box>

              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mt: "20px",
                  mb: "14px",
                }}
              >
                Favicon
              </Typography>
              {favIconDropZoneElement}
              <SwitchAI />
            </>
          )}
          {(!isSmallMonitor || (isSmallMonitor && formState === "content")) && (
            <>
              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mb: "14px",
                }}
              >
                Заголовок
              </Typography>
              <CustomTextField
                id="headingInput"
                placeholder="Имя заголовка опроса для подбора табуретки"
                value={quiz.name}
                onChange={(e) =>
                  updateQuiz(quiz.id, (quiz) => {
                    quiz.name = e.target.value;
                  })
                }
                maxLength={700}
              />
              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mt: "20px",
                  mb: "14px",
                }}
              >
                Текст
              </Typography>
              <CustomTextField
                id="textInput"
                placeholder="Внимательно заполняйте поля ответов"
                value={quiz.config.startpage.description}
                onChange={(e) =>
                  updateQuiz(quiz.id, (quiz) => {
                    quiz.config.startpage.description = e.target.value;
                  })
                }
                maxLength={700}
              />
              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mt: "20px",
                  mb: "14px",
                }}
              >
                Текст кнопки
              </Typography>
              <CustomTextField
                id="buttonTextInput"
                placeholder="Начать опрос"
                value={quiz.config.startpage.button}
                onChange={(e) =>
                  updateQuiz(quiz.id, (quiz) => {
                    quiz.config.startpage.button = e.target.value;
                  })
                }
                maxLength={150}
              />
              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mt: "20px",
                  mb: "14px",
                }}
              >
                Телефон
              </Typography>
              <CustomTextField
                id="phoneInput"
                placeholder="8-800-000-00-00"
                type="number"
                value={quiz.config.info.phonenumber}
                onChange={(e) =>
                  updateQuiz(quiz.id, (quiz) => {
                    quiz.config.info.phonenumber = e.target.value;
                  })
                }
                maxLength={20}
              />
              <CustomCheckbox
                sx={{ margin: "10px 0" }}
                label="Кликабельный"
                checked={quiz.config.info.clickable}
                handleChange={(e) =>
                  updateQuiz(quiz.id, (quiz) => {
                    quiz.config.info.clickable = e.target.checked;
                  })
                }
              />
              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mt: "11px",
                  mb: "14px",
                }}
              >
                Название или слоган компании
              </Typography>
              <CustomTextField
                id="companyInput"
                placeholder="Только лучшее"
                value={quiz.config.info.orgname}
                onChange={(e) =>
                  updateQuiz(quiz.id, (quiz) => {
                    quiz.config.info.orgname = e.target.value;
                  })
                }
                maxLength={150}
              />
              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mt: "20px",
                  mb: "14px",
                }}
              >
                Сайт
              </Typography>
              <CustomTextField
                id="websiteInput"
                placeholder="https://mysite.com"
                value={quiz.config.info.site}
                onChange={(e) =>
                  updateQuiz(quiz.id, (quiz) => {
                    quiz.config.info.site = e.target.value;
                  })
                }
                maxLength={2000}
              />
              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mt: "20px",
                  mb: "14px",
                }}
              >
                Юридическая информация
              </Typography>
              <CustomTextField
                id="legalInformationInput"
                placeholder="Данные наших документов"
                value={quiz.config.info.law}
                onChange={(e) =>
                  updateQuiz(quiz.id, (quiz) => {
                    quiz.config.info.law = e.target.value;
                  })
                }
                maxLength={1000}
              />
              <Extra />
              <Box sx={{ display: "flex", gap: "20px", alignItems: "center" }}>
                <CustomizedSwitch
                  checked={quiz.config.antifraud}
                  onChange={(e) => {
                    updateQuiz(quiz.id, (quiz) => {
                      quiz.config.antifraud = e.target.checked;
                    });
                  }}
                />
                <Typography
                  sx={{
                    fontWeight: 500,
                    color: theme.palette.grey3.main,
                  }}
                >
                  Включить антифрод
                </Typography>
              </Box>
              <Box sx={{ display: "flex", gap: "20px", alignItems: "center", mt: "20px" }}>
                <CustomizedSwitch
                  checked={quiz.config?.isUnSc}
                  onChange={(e) => {
                    updateQuiz(quiz.id, (quiz) => {
                      quiz.config.isUnSc = e.target.checked;
                    });
                  }}
                />
                <Typography
                  sx={{
                    fontWeight: 500,
                    color: theme.palette.grey3.main,
                  }}
                >
                  Включить защиту от копирования
                </Typography>
              </Box>
              {!isSmallMonitor &&<SwitchAI />}
            </>
          )}
        </Box>
      </Box>
      {isSmallMonitor && (
        <Box sx={{ maxWidth: "1160px", marginBottom: "60px" }}>
          {formState === "content" && (
            <Button
              onClick={() => setFormState("design")}
              sx={{
                display: "flex",
                marginTop: "20px",
                padding: "0",
                fontWeight: "bold",
                fontSize: "16px",
                color: "#7E2AEA",
                textDecoration: "underline",
                textUnderlineOffset: "2px",
              }}
            >
              <ArrowLeft right={false} /> Вернуться к дизайну
            </Button>
          )}
          {formState === "design" && (
            <Button
              onClick={() => setFormState("content")}
              sx={{
                display: "flex",
                marginLeft: "auto",
                marginTop: "20px",
                padding: "0",
                fontWeight: "bold",
                fontSize: "16px",
                color: "#7E2AEA",
                textDecoration: "underline",
                textUnderlineOffset: "2px",
              }}
            >
              Далее заполнить контент <ArrowLeft right={true} />
            </Button>
          )}
        </Box>
      )}
      <Box
        sx={{
          maxWidth: "1160px",
          display: "flex",
          gap: "20px",
          justifyContent: "flex-end",
          flexDirection: isTablet ? "column" : "row",
          marginTop: "30px",
          marginBottom: isTablet ? "90px" : undefined,
        }}
      >
        <FormControlLabel
          control={
            <Checkbox
              icon={
                <Button
                  variant="outlined"
                  sx={{
                    backgroundColor: "transparent",
                    color: theme.palette.brightPurple.main,
                  }}
                >
                  Отключить стартовую страницу
                </Button>
              }
              checkedIcon={
                <Button
                  variant="outlined"
                  sx={{
                    backgroundColor: theme.palette.brightPurple.main,
                    color: "white",
                  }}
                >
                  Включить стартовую страницу
                </Button>
              }
              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",
          }}
        />
        <Button
          variant="contained"
          data-cy="setup-questions"
          onClick={incrementCurrentStep}
        >
          Настроить вопросы
        </Button>
      </Box>
      {createPortal(<StartPagePreview />, document.body)}
    </>
  );
}

function IconCheck() {
  return (
    <Box
      sx={{
        height: "36px",
        width: "36px",
        borderRadius: "8px",
        backgroundColor: "#EEE4FC",
      }}
    />
  );
}
