frontPanel/src/pages/startPage/StartPageSettings.tsx

import {
  Box,
  Button,
  ButtonBase,
  Checkbox,
  FormControl,
  FormControlLabel,
  MenuItem,
  Select,
  Typography,
  useTheme,
} from "@mui/material";
import { ChangeEvent, useState } from "react";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import AlignLeftIcon from "../../assets/icons/AlignLeftIcon";
import AlignRightIcon from "../../assets/icons/AlignRightIcon";
import ArrowDown from "../../assets/icons/ArrowDownIcon";
import InfoIcon from "../../assets/icons/InfoIcon";
import LayoutCenteredIcon from "../../assets/icons/LayoutCenteredIcon";
import LayoutExpandedIcon from "../../assets/icons/LayoutExpandedIcon";
import LayoutStandartIcon from "../../assets/icons/LayoutStandartIcon";
import MobilePhoneIcon from "../../assets/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 { useNavigate, 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";

interface HandleNext {
  handleNext: () => void;
}

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({ handleNext }: HandleNext) {
  const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
  const params = Number(useParams().quizId);
  const theme = useTheme();
  const designType = listQuizes[params].startpage;
  const StartPageClone = listQuizes[params];
  console.log(StartPageClone);
  const [backgroundType, setBackgroundType] = useState(listQuizes[params].config.startpage.background.type);
  const [alignType, setAlignType] = useState<AlignType>("left");

  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" }}>
        Стартовая страница
      </Typography>
      <Box
        sx={{
          backgroundColor: "white",
          borderRadius: "12px",
          p: "20px",
          display: "flex",
          gap: "20px",
          marginTop: "40px",
          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)`,
        }}
      >
        <Box
          sx={{
            pr: "20px",
            borderRight: `1px solid ${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"} />
            </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>
              <InfoIcon />
            </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>

          <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"} />
          </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: "flex",
            flexDirection: "column",
            flex: `1 1 795px`,
          }}
        >
          <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) => {
              console.log(e.target.checked);
              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>
      <Box
        sx={{
          display: "flex",
          gap: "20px",
          justifyContent: "flex-end",
          marginTop: "20px",
          maxWidth: "1200px",
        }}
      >
        <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,
            ml: "-9px",
            userSelect: "none",
          }}
        />
        <Button
          variant="contained"
          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>
    </>
  );
}

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