frontPanel/src/pages/startPage/StartPageSettings.tsx

import { ChangeEvent, useState } from "react";
import {
  Box,
  Button,
  ButtonBase,
  Checkbox,
  FormControl,
  FormControlLabel,
  MenuItem,
  Select,
  Tooltip,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { createPortal } from "react-dom";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import AlignLeftIcon from "@icons/AlignLeftIcon";
import AlignRightIcon from "@icons/AlignRightIcon";
import ArrowDown from "@icons/ArrowDownIcon";
import InfoIcon from "@icons/InfoIcon";
import LayoutCenteredIcon from "@icons/LayoutCenteredIcon";
import LayoutExpandedIcon from "@icons/LayoutExpandedIcon";
import LayoutStandartIcon from "@icons/LayoutStandartIcon";
import MobilePhoneIcon from "@icons/MobilePhoneIcon";
import UploadIcon from "../../assets/icons/UploadIcon";
import SelectableButton from "@ui_kit/SelectableButton";
import SelectableIconButton from "./SelectableIconButton";
import UploadBox from "@ui_kit/UploadBox";
import CustomTextField from "@ui_kit/CustomTextField";
import { quizStore } from "@root/quizes";
import { useParams } from "react-router-dom";
import * as React from "react";
import ModalSizeImage from "./ModalSizeImage";
import { DropZone } from "./dropZone";
import Extra from "./extra";
import AlignCenterIcon from "@icons/AlignCenterIcon";
import DropFav from "./dropfavicon";
import { createQuestion } from "@root/questions";
import { StartPagePreview } from "@ui_kit/StartPagePreview";

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;
// type DesignType = typeof designTypes[number][0];

type BackgroundType = "image" | "video";
type AlignType = "left" | "right" | "center";

export default function StartPageSettings() {
  const [alignType, setAlignType] = useState<AlignType>("left");
  const [formState, setFormState] = useState<"design" | "content">("design");
  const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
  const params = Number(useParams().quizId);
  const theme = useTheme();
  const designType = listQuizes[params].startpage;
  const [backgroundType, setBackgroundType] = useState(
    listQuizes[params].config.startpage.background.type
  );
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500));
  const isTablet = useMediaQuery(theme.breakpoints.down(950));

  const handleNext = () => {
    updateQuizesList(params, { step: listQuizes[params].step + 1 });
  };

  const videoHC = (videoInp: HTMLInputElement) => {
    const file = videoInp.files?.[0];

    if (file) {
      setVideo(URL.createObjectURL(file));
    }
  };

  const [video, setVideo] = React.useState("");

  const mutationHC = (e: ChangeEvent<HTMLInputElement>) => {
    let SPageClone = listQuizes[params].config;
    SPageClone.startpage.description = e.target.value;
    updateQuizesList(params, { config: SPageClone });
  };

  const mutationButtonHC = (e: ChangeEvent<HTMLInputElement>) => {
    let SPageClone = listQuizes[params].config;
    SPageClone.startpage.button = e.target.value;
    updateQuizesList(params, { config: SPageClone });
  };

  const mutationPhoneHC = (e: ChangeEvent<HTMLInputElement>) => {
    let SPageClone = listQuizes[params].config;
    SPageClone.info.phonenumber = e.target.value;
    updateQuizesList(params, { config: SPageClone });
  };

  const mutationSiteHC = (e: ChangeEvent<HTMLInputElement>) => {
    let SPageClone = listQuizes[params].config;
    SPageClone.info.site = e.target.value;
    updateQuizesList(params, { config: SPageClone });
  };

  const mutationLawHC = (e: ChangeEvent<HTMLInputElement>) => {
    let SPageClone = listQuizes[params].config;
    SPageClone.info.law = e.target.value;
    updateQuizesList(params, { config: SPageClone });
  };

  const mutationOrgNameHC = (e: ChangeEvent<HTMLInputElement>) => {
    let SPageClone = listQuizes[params].config;
    SPageClone.info.orgname = e.target.value;
    updateQuizesList(params, { config: SPageClone });
  };

  const mutationPositionHC = (e: ChangeEvent<HTMLInputElement>) => {
    let SPageClone = listQuizes[params].config;
    SPageClone.startpage.position = e.target.value;
    updateQuizesList(params, { config: SPageClone });
  };

  const [mobileVersion, setMobileVersion] = React.useState(false);
  const MobileVersionHC = (bool: boolean) => {
    setMobileVersion(bool);
  };

  return (
    <>
      <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 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 342px`,
            }}
          >
            <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) =>
                  updateQuizesList(params, { startpage: e.target.value })
                }
                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={backgroundType === "image"}
                onClick={() => {
                  setBackgroundType("image");
                  let SPageClone = listQuizes[params].config;
                  SPageClone.startpage.background.type = "image";
                  updateQuizesList(params, { config: SPageClone });
                }}
              >
                Изображение
              </SelectableButton>
              <SelectableButton
                isSelected={backgroundType === "video"}
                onClick={() => {
                  setBackgroundType("video");
                  let SPageClone = listQuizes[params].config;
                  SPageClone.startpage.background.type = "video";
                  updateQuizesList(params, { config: SPageClone });
                }}
              >
                Видео
              </SelectableButton>
            </Box>

            <Box
              sx={{
                display: backgroundType === "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>
                <DropZone
                  text={"5 MB максимум"}
                  heightImg={"110px"}
                  sx={{ maxWidth: "300px" }}
                />
              </Box>

              <ModalSizeImage />

              <Box
                sx={{
                  mt: "20px",
                  display: "flex",
                  gap: "10px",
                  flexDirection: "column",
                }}
              >
                <FormControlLabel
                  control={
                    <Checkbox
                      icon={<IconCheck />}
                      checkedIcon={<MobilePhoneIcon bgcolor={"#EEE4FC"} />}
                    />
                  }
                  label="мобильная версия"
                  sx={{
                    color: theme.palette.brightPurple.main,
                    textDecorationLine: "underline",
                    textDecorationColor: theme.palette.brightPurple.main,
                    ml: "-9px",
                    userSelect: "none",
                  }}
                  onClick={() => {
                    MobileVersionHC(!mobileVersion);
                  }}
                />
                {mobileVersion ? (
                  <Box sx={{ display: "flex", flexDirection: "column" }}>
                    <Typography
                      sx={{
                        fontWeight: 500,
                        color: theme.palette.grey3.main,
                        mt: "11px",
                        mb: "14px",
                      }}
                    >
                      Изображение для мобильной версии
                    </Typography>
                    <DropZone text={"5 MB максимум"} heightImg={"110px"} />
                  </Box>
                ) : (
                  <></>
                )}
              </Box>
            </Box>

            <Box
              sx={{
                display: backgroundType === "image" ? "none" : "flex",
                flexDirection: "column",
              }}
            >
              <Box
                sx={{
                  display: "flex",
                  alignItems: "center",
                  gap: "7px",
                  mt: "20px",
                  mb: "14px",
                }}
              >
                <Typography
                  sx={{ fontWeight: 500, color: theme.palette.grey3.main }}
                >
                  Добавить видео
                </Typography>
                <Tooltip title="Можно загрузить видео." placement="top">
                  <Box>
                    <InfoIcon />
                  </Box>
                </Tooltip>
              </Box>
              <ButtonBase
                component="label"
                sx={{ justifyContent: "flex-start" }}
              >
                <input
                  onChange={(event) => videoHC(event.target)}
                  hidden
                  accept=".mp4"
                  multiple
                  type="file"
                />
                <UploadBox
                  icon={<UploadIcon />}
                  sx={{
                    height: "48px",
                    width: "48px",
                    marginBottom: "20px",
                  }}
                />
              </ButtonBase>
              {video ? <video src={video} width="400" controls /> : null}
              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mt: "20px",
                  mb: "5px",
                }}
              >
                Настройки видео
              </Typography>
              <CustomCheckbox
                label="Зацикливать видео"
                checked={listQuizes[params].config.startpage.background.cycle}
                handleChange={(e) => {
                  let SPageClone = listQuizes[params].config;
                  SPageClone.startpage.background.cycle = e.target.checked;
                  updateQuizesList(params, { config: SPageClone });
                }}
              />
              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mt: "11px",
                  mb: "14px",
                }}
              >
                Изображение для мобильной версии
              </Typography>
              <DropZone text={"5 MB максимум"} heightImg={"110px"} />
            </Box>

            <Typography
              sx={{
                fontWeight: 500,
                color: theme.palette.grey3.main,
                mt: "20px",
                mb: "14px",
              }}
            >
              Расположение элементов
            </Typography>
            <Box
              sx={{
                display: "flex",
                gap: "10px",
              }}
            >
              <SelectableIconButton
                onClick={() => {
                  setAlignType("left");
                  let SPageClone = listQuizes[params].config;
                  SPageClone.startpage.position = "ltr";
                  updateQuizesList(params, { config: SPageClone });
                }}
                isActive={alignType === "left"}
                Icon={AlignLeftIcon}
              />
              <SelectableIconButton
                onClick={() => {
                  setAlignType("center");
                  let SPageClone = listQuizes[params].config;
                  SPageClone.startpage.position = "cnt";
                  updateQuizesList(params, { config: SPageClone });
                }}
                isActive={alignType === "center"}
                Icon={AlignCenterIcon}
                sx={{ display: designType === "centered" ? "flex" : "none" }}
              />
              <SelectableIconButton
                onClick={() => {
                  setAlignType("right");
                  let SPageClone = listQuizes[params].config;
                  SPageClone.startpage.position = "rtl";
                  updateQuizesList(params, { config: SPageClone });
                }}
                isActive={alignType === "right"}
                Icon={AlignRightIcon}
              />
            </Box>

            {(isTablet || !isSmallMonitor) && (
              <>
                <Box
                  sx={{
                    display: backgroundType === "image" ? "flex" : "none",
                    flexDirection: "column",
                  }}
                >
                  <Typography
                    sx={{
                      fontWeight: 500,
                      color: theme.palette.grey3.main,
                      margin: "20px 0",
                    }}
                  >
                    Логотип
                  </Typography>
                  <DropZone
                    text={"5 MB максимум"}
                    heightImg={"110px"}
                    sx={{ maxWidth: "300px" }}
                  />
                </Box>

                <Typography
                  sx={{
                    fontWeight: 500,
                    color: theme.palette.grey3.main,
                    mt: "20px",
                    mb: "14px",
                  }}
                >
                  Favicon
                </Typography>
                <Box
                  sx={{
                    display: "flex",
                    alignItems: "end",
                    gap: "10px",
                  }}
                >
                  <DropFav
                    sx={{ height: "48px", width: "48px" }}
                    heightImg={"48px"}
                    widthImg={"48px"}
                  />

                  <Typography
                    sx={{
                      color: theme.palette.orange.main,
                      fontSize: "16px",
                      lineHeight: "19px",
                      textDecoration: "underline",
                    }}
                  >
                    5 MB максимум
                  </Typography>
                </Box>
              </>
            )}
          </Box>
        )}
        {/*Правая сторона*/}
        <Box
          sx={{
            display: isTablet && formState === "design" ? "none" : "flex",
            flexDirection: "column",
            flex: `1 1 795px`,
          }}
        >
          {!isTablet && isSmallMonitor && formState === "design" && (
            <>
              <Box
                sx={{
                  display: backgroundType === "image" ? "flex" : "none",
                  flexDirection: "column",
                }}
              >
                <Typography
                  sx={{
                    fontWeight: 500,
                    color: theme.palette.grey3.main,
                    marginBottom: "15px",
                  }}
                >
                  Логотип
                </Typography>
                <DropZone
                  text={"5 MB максимум"}
                  heightImg={"110px"}
                  sx={{ maxWidth: "300px" }}
                />
              </Box>

              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mt: "20px",
                  mb: "14px",
                }}
              >
                Favicon
              </Typography>
              <Box
                sx={{
                  display: "flex",
                  alignItems: "end",
                  gap: "10px",
                }}
              >
                <DropFav
                  sx={{ height: "48px", width: "48px" }}
                  heightImg={"48px"}
                  widthImg={"48px"}
                />

                <Typography
                  sx={{
                    color: theme.palette.orange.main,
                    fontSize: "16px",
                    lineHeight: "19px",
                    textDecoration: "underline",
                  }}
                >
                  5 MB максимум
                </Typography>
              </Box>
            </>
          )}
          {(!isSmallMonitor || (isSmallMonitor && formState === "content")) && (
            <>
              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mb: "14px",
                }}
              >
                Заголовок
              </Typography>
              <CustomTextField
                placeholder="Текст-заполнитель — это текст, который"
                text={listQuizes[params].name}
                onChange={(e) =>
                  updateQuizesList(params, { name: e.target.value })
                }
              />
              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mt: "20px",
                  mb: "14px",
                }}
              >
                Текст
              </Typography>
              <CustomTextField
                placeholder="Текст-заполнитель — это текст, который "
                text={listQuizes[params].config.startpage.description}
                onChange={mutationHC}
              />
              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mt: "20px",
                  mb: "14px",
                }}
              >
                Текст кнопки
              </Typography>
              <CustomTextField
                placeholder="Начать"
                text={listQuizes[params].config.startpage.button}
                onChange={mutationButtonHC}
              />
              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mt: "20px",
                  mb: "14px",
                }}
              >
                Телефон
              </Typography>
              <CustomTextField
                placeholder="+7 900 000 00 00"
                text={listQuizes[params].config.info.phonenumber}
                onChange={mutationPhoneHC}
              />
              <CustomCheckbox
                label="Кликабельный"
                checked={listQuizes[params].config.info.clickable}
                handleChange={(e) => {
                  let SPageClone = listQuizes[params].config;
                  SPageClone.info.clickable = e.target.checked;
                  updateQuizesList(params, { config: SPageClone });
                }}
              />
              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mt: "11px",
                  mb: "14px",
                }}
              >
                Название или слоган компании
              </Typography>
              <CustomTextField
                placeholder="Текст-заполнитель — это текст, который "
                text={listQuizes[params].config.info.orgname}
                onChange={mutationOrgNameHC}
              />
              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mt: "20px",
                  mb: "14px",
                }}
              >
                Сайт
              </Typography>
              <CustomTextField
                placeholder="Текст-заполнитель — это текст, который "
                text={listQuizes[params].config.info.site}
                onChange={mutationSiteHC}
              />
              <Typography
                sx={{
                  fontWeight: 500,
                  color: theme.palette.grey3.main,
                  mt: "20px",
                  mb: "14px",
                }}
              >
                Юридическая информация
              </Typography>
              <CustomTextField
                placeholder="Текст-заполнитель — это текст, который "
                text={listQuizes[params].config.info.law}
                onChange={mutationLawHC}
              />
              <Extra />
            </>
          )}
        </Box>
      </Box>
      {isSmallMonitor && (
        <Box sx={{ maxWidth: "1160px", marginBottom: "60px" }}>
          {formState === "content" && (
            <Button
              onClick={() => setFormState("design")}
              sx={{
                display: "block",
                marginTop: "20px",
                padding: "0",
                fontWeight: "bold",
                fontSize: "16px",
                color: "#7E2AEA",
                textDecoration: "underline",
                textUnderlineOffset: "2px",
              }}
            >
              🡰 Вернуться к дизайну
            </Button>
          )}
          {formState === "design" && (
            <Button
              onClick={() => setFormState("content")}
              sx={{
                display: "block",
                marginLeft: "auto",
                marginTop: "20px",
                padding: "0",
                fontWeight: "bold",
                fontSize: "16px",
                color: "#7E2AEA",
                textDecoration: "underline",
                textUnderlineOffset: "2px",
              }}
            >
              Далее заполнить контент 🡲
            </Button>
          )}
        </Box>
      )}
      <Box
        sx={{
          maxWidth: "1160px",
          display: "flex",
          gap: "20px",
          justifyContent: "flex-end",
          flexDirection: isTablet ? "column" : "row",
          marginTop: "30px",
        }}
      >
        <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) => {
                let SPageClone = listQuizes[params].config;
                SPageClone.noStartPage = e.target.checked;
                updateQuizesList(params, { config: SPageClone });
              }}
              checked={listQuizes[params].config.noStartPage}
            />
          }
          label=""
          sx={{
            color: theme.palette.brightPurple.main,
            margin: "0",
            userSelect: "none",
            justifyContent: "flex-end",
          }}
        />
        <Button
          variant="contained"
          data-cy="setup-questions"
          onClick={() => {
            let SPageClone = listQuizes[params].config;
            SPageClone.startpage.background.desktop =
              "https://happypik.ru/wp-content/uploads/2019/09/njashnye-kotiki8.jpg";
            SPageClone.startpage.background.mobile =
              "https://krot.info/uploads/posts/2022-03/1646156155_3-krot-info-p-smeshnie-tolstie-koti-smeshnie-foto-3.png";
            SPageClone.startpage.background.video =
              "https://youtu.be/dbaPkCiLPKQ";
            updateQuizesList(params, { config: SPageClone });
            handleNext();
            createQuestion(params);
          }}
        >
          Настроить вопросы
        </Button>
      </Box>
      {createPortal(<StartPagePreview />, document.body)}
    </>
  );
}

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