frontPanel/src/pages/InstallQuiz/InstallQuiz.tsx

import React, { useState } from "react";
import {
  Box,
  Button,
  ButtonBase,
  FormControl,
  IconButton,
  InputAdornment,
  Link,
  MenuItem,
  Modal,
  OutlinedInput,
  Paper,
  Select,
  SelectChangeEvent,
  TextField,
  Typography,
  Tooltip,
  useTheme,
} from "@mui/material";
import LinkIcon from "../../assets/icons/LinkIcon";
import InfoIcon from "../../assets/icons/InfoIcon";
import ArrowDown from "../../assets/icons/ArrowDownIcon";
import CopyIcon from "../../assets/icons/CopyIcon";
import VkIcon from "../../assets/icons/VkIcon";
import DomenIcon from "../../assets/icons/DomenIcon";
import OnButton from "../../assets/OnButton.png";
import Bunner from "../../assets/Bunner.png";
import InBidySite from "../../assets/InBodySite.png";
import AutoOpen from "../../assets/AutoOpen.png";
import WidgetImg from "../../assets/Widget.png";
import OneIconBorder from "../../assets/icons/OneIconBorder";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import CustomTextField from "@ui_kit/CustomTextField";
import VkIconButton from "../../assets/icons/VkIconButton";
import SelectableButton from "@ui_kit/SelectableButton";
import ButtonSocial from "./ButtonSocial";
import OnButtonInstall from "./OnButtonInstall";
import BannerInstall from "./BannerInstall";
import InBodyInstall from "./InBodyInstall";
import AutoOpenInstall from "./AutoOpenInstall";
import VidjetInstall from "./VidjetInstall";
import InstallQzCode from "./InstallQzCode";
import { incrementCurrentStep } from "@root/quizes/actions";

type BackgroundType = "text" | "video";

export default function InstallQuiz() {
  const buttonInstall: { icon: string; title: string; text: string }[] = [
    {
      icon: OnButton,
      title: "По кнопке",
      text: "Конструктор кнопки или собственная кнопка",
    },
    { icon: Bunner, title: "Баннером", text: "Сбоку или на всю ширину экрана" },
    {
      icon: InBidySite,
      title: "В тело сайта",
      text: "Задайте свои размеры и встройте в сайт",
    },
    {
      icon: AutoOpen,
      title: "Автооткрытие",
      text: "Автооткрытие поп-ап на сайте",
    },
    {
      icon: WidgetImg,
      title: "Виджет",
      text: "Сбоку страницы как консультант",
    },
  ];

  const [display, setDisplay] = React.useState("1");
  const handleChange = (event: SelectChangeEvent) => {
    setDisplay(event.target.value);
  };

  const [openVk, setOpenVk] = React.useState(false);
  const handleOpenVk = () => setOpenVk(true);
  const handleCloseVk = () => setOpenVk(false);

  const [openDom, setOpenDom] = React.useState(false);
  const handleOpenDom = () => setOpenDom(true);
  const handleCloseDom = () => setOpenDom(false);

  const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");

  const theme = useTheme();

  return (
    <>
      <Box sx={{ marginTop: "60px", display: "flex", gap: "40px" }}>
        <Paper
          sx={{
            maxWidth: "522px",
            width: "100%",
            padding: "20px",
            borderRadius: "12px",
            display: "flex",
            flexDirection: "column",
            gap: "30px",
            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={{ display: "flex", alignItems: "center", gap: "10px" }}>
            <LinkIcon
              color={theme.palette.brightPurple.main}
              bgcolor={"#EEE4FC"}
            />
            <Typography>Ссылка на квиз</Typography>

            <Tooltip
              title="Скопируйте или укажите свою ссылку на квиз. Ссылка должна быть от 4 до 20 символов включительно, может содержать латинские буквы, цифры, тире '-' и нижнее подчеркивание '_'."
              placement="top"
            >
              <Box>
                <InfoIcon />
              </Box>
            </Tooltip>
            <FormControl
              fullWidth
              size="small"
              sx={{
                width: "100%",
                maxWidth: "180px",
                height: "48px",
                // margin: '0 10px'
              }}
            >
              <Select
                id="display-select"
                variant="outlined"
                value={display}
                displayEmpty
                onChange={handleChange}
                sx={{
                  height: "48px",
                  borderRadius: "8px",
                  "& .MuiOutlinedInput-notchedOutline": {
                    border: "none !important",
                  },
                }}
                MenuProps={{
                  PaperProps: {
                    sx: {
                      mt: "8px",
                      p: "4px",
                      borderRadius: "8px",
                    },
                  },
                  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} />}
              >
                <MenuItem
                  value={1}
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    gap: "20px",
                    p: "4px",
                    borderRadius: "5px",
                    color: theme.palette.grey2.main,
                  }}
                >
                  Стандартная
                </MenuItem>
                <MenuItem
                  value={2}
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    gap: "20px",
                    p: "4px",
                    borderRadius: "5px",
                    color: theme.palette.grey2.main,
                  }}
                >
                  На поддомене
                </MenuItem>
              </Select>
            </FormControl>
          </Box>
          <Box sx={{ display: "flex", alignItems: "center" }}>
            <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
              <TextField
                disabled
                id="outlined-disabled"
                value="https://pena.com/"
                sx={{
                  "& .css-1d3z3hw-MuiOutlinedInput-notchedOutline": {
                    border: "none",
                  },
                  "& .MuiInputBase-root": {
                    height: "48px",
                    borderRadius: "10px 0 0 10px",
                    backgroundColor: "#EEE4FC",
                  },
                }}
              />
            </FormControl>
            <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
              <TextField
                value=""
                fullWidth
                placeholder="6235840cc71"
                sx={{
                  "& .MuiInputBase-root": {
                    backgroundColor: theme.palette.background.default,
                    height: "48px",
                    borderRadius: "0 10px 10px 0",
                  },
                }}
                inputProps={{
                  sx: {
                    borderRadius: "0 10px 10px 0",
                    fontSize: "18px",
                    lineHeight: "21px",
                    py: 0,
                  },
                }}
              />
            </FormControl>
            <CopyIcon
              color={theme.palette.brightPurple.main}
              bgcolor={"#EEE4FC"}
              marL={"10px"}
            />
          </Box>
          <Box
            sx={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
            }}
          >
            <ButtonSocial />

            <Typography sx={{ color: "#FC712F" }}>Не опубликован</Typography>
          </Box>
        </Paper>
        <Paper
          sx={{
            maxWidth: "220px",
            width: "100%",
            padding: "20px",
            borderRadius: "12px",
            display: "flex",
            flexDirection: "column",
            gap: "18px",
            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={{ display: "flex", alignItems: "center", gap: "10px" }}>
            <VkIcon
              color={theme.palette.brightPurple.main}
              bgcolor={"#EEE4FC"}
            />
            <Typography> Вконтакте</Typography>
          </Box>

          <Typography>
            Для публикации сниппета на стене группы, призывающего пройти тест.
          </Typography>
          <Link
            component="button"
            onClick={handleOpenVk}
            sx={{
              fontSize: "16px",
              lineHeight: "19px",
              color: theme.palette.brightPurple.main,
              textDecorationColor: theme.palette.brightPurple.main,
              textAlign: "left",
            }}
          >
            Подключить
          </Link>
        </Paper>
        <Paper
          sx={{
            maxWidth: "220px",
            width: "100%",
            padding: "20px",
            borderRadius: "12px",
            display: "flex",
            flexDirection: "column",
            gap: "18px",
            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={{ display: "flex", alignItems: "center", gap: "10px" }}>
            <DomenIcon
              color={theme.palette.brightPurple.main}
              bgcolor={"#EEE4FC"}
            />
            <Typography>Свой домен</Typography>
          </Box>
          <Typography>
            Подключите свой домен, если хотите, чтобы квиз открывался по вашей
            ссылке.
          </Typography>
          <Link
            component="button"
            onClick={handleOpenDom}
            sx={{
              fontSize: "16px",
              lineHeight: "19px",
              color: theme.palette.brightPurple.main,
              textDecorationColor: theme.palette.brightPurple.main,
              textAlign: "left",
            }}
          >
            Подключить
          </Link>
        </Paper>
      </Box>
      <Box
        sx={{
          backgroundColor: "#ffffff",
          padding: "20px",
          mt: "40px",
          borderRadius: "12px",
          maxWidth: "1160px",
          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={{ display: "flex", alignItems: "center" }}>
          <Typography variant="h5" sx={{ paddingRight: "30px" }}>
            Установка квизов на сайте
          </Typography>
          <OneIconBorder color={"#FC712F"} />
          <Typography sx={{ color: "#FC712F" }}>Способ установки</Typography>
        </Box>

        <Box
          sx={{
            padding: "20px",
            display: "flex",
            gap: "30px",
          }}
        >
          {buttonInstall.map((e, i) => (
            <ButtonBase
              key={i}
              // onClick={()=>{}}
              sx={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "start",
                alignItems: "start",
                maxWidth: "205px",
                gap: "15px",
              }}
            >
              <img src={e.icon} />
              <Typography>{e.title}</Typography>
              <Typography
                sx={{
                  fontSize: "16px",
                  color: theme.palette.grey2.main,
                  textAlign: "start",
                }}
              >
                {e.text}
              </Typography>
            </ButtonBase>
          ))}
        </Box>
      </Box>
      <OnButtonInstall />
      <BannerInstall />
      <InBodyInstall />
      <AutoOpenInstall />
      <VidjetInstall />
      <InstallQzCode />
      <Box
        sx={{ display: "flex", gap: "8px", justifyContent: "end", mt: "30px" }}
      >
        <Button
          variant="outlined"
          sx={{ padding: "10px 20px", borderRadius: "8px" }}
        >
          <ArrowLeft />
        </Button>
        <Button variant="contained" onClick={incrementCurrentStep}>Запустить рекламу</Button>
      </Box>

      <Modal
        open={openVk}
        onClose={handleCloseVk}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box
          sx={{
            position: "absolute" as "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            maxWidth: "620px",
            width: "100%",
            bgcolor: "background.paper",
            borderRadius: "12px",

            boxShadow: 24,
            p: 0,
          }}
        >
          <Box
            sx={{
              display: "flex",
              padding: "20px",
              borderRadius: "12px 12px 0 0",
              background: theme.palette.background.default,
            }}
          >
            <Typography sx={{ color: theme.palette.grey2.main }}>
              Добавить квиз в группу ВК
            </Typography>
          </Box>
          <Box
            sx={{
              padding: "20px",
              display: "flex",
              flexDirection: "column",
              gap: "30px",
            }}
          >
            <Box
              sx={{
                display: "flex",
                gap: "20px",
                // alignItems: 'center',
                flexDirection: "column",
              }}
            >
              <Typography>1. Добавьте приложение в сообщество</Typography>
              <Button
                variant="contained"
                sx={{
                  maxWidth: "275px",
                  display: "flex",
                  gap: "10px",
                  padding: "13px 15px",
                }}
              >
                {" "}
                <VkIconButton />
                Добавить приложение
              </Button>
              <Typography sx={{ color: theme.palette.grey2.main }}>
                Для публикации сниппета на стене, призывающего пройти тест,
                вставьте в новую запись ссылку на приложение
              </Typography>
              <CustomTextField
                placeholder={""}
                text={"https://vk.com/app6656524_-XXXXXXXXXXX"}
              />
              <Typography
                sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
              >
                где XXXXXXXXXXX - id вашего сообщества (полный адрес ссылки
                можно узнать в браузерной строке, открыв приложение в вашей
                группе
              </Typography>
            </Box>

            <Box
              sx={{
                display: "flex",
                gap: "20px",
                flexDirection: "column",
              }}
            >
              <Typography>
                2. Откройте квиз в группе (вы должны быть администратором
                группы)
              </Typography>
              <Typography
                sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
              >
                Справа снизу нажмите на значок "редактировать" В появившемся
                окне введите id квиза и нажмите "Привязать". Готово! Квиз
                привязан к группе
              </Typography>
              <Typography sx={{ color: theme.palette.grey2.main }}>
                ID этого квиза
              </Typography>
              <CustomTextField
                placeholder={""}
                text={"639727c5177be5004f11a0f2"}
              />
            </Box>

            <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
              <Button variant="outlined" onClick={handleCloseVk}>
                Отмена
              </Button>
              <Button variant="contained">Готово</Button>
            </Box>
          </Box>
        </Box>
      </Modal>

      <Modal
        open={openDom}
        onClose={handleCloseDom}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      >
        <Box
          sx={{
            position: "absolute" as "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            maxWidth: "620px",
            width: "100%",
            bgcolor: "background.paper",
            borderRadius: "12px",

            boxShadow: 24,
            p: 0,
          }}
        >
          <Box
            sx={{
              display: "flex",
              padding: "20px",
              borderRadius: "12px 12px 0 0",
              background: theme.palette.background.default,
            }}
          >
            <Typography sx={{ color: theme.palette.grey2.main }}>
              Подключить свой домен
            </Typography>
          </Box>
          <Box
            sx={{
              padding: "20px",
              display: "flex",
              flexDirection: "column",
              gap: "30px",
            }}
          >
            <Box
              sx={{
                display: "flex",
                gap: "20px",
                flexDirection: "column",
              }}
            >
              <Typography sx={{ color: theme.palette.grey2.main }}>
                Подключите домен к проекту, чтобы создать несколько квизов на
                одном домене
              </Typography>
              <Typography>1. Настройте записи в регистраторе домена</Typography>
              <Box sx={{ display: "flex" }}>
                <SelectableButton
                  isSelected={backgroundType === "text"}
                  onClick={() => setBackgroundType("text")}
                >
                  Для поддоменов
                </SelectableButton>
                <SelectableButton
                  isSelected={backgroundType === "video"}
                  onClick={() => setBackgroundType("video")}
                >
                  Для доменов
                </SelectableButton>
              </Box>

              <Typography sx={{ color: theme.palette.grey2.main }}>
                Создайте для нужного поддомена две cname-записи
              </Typography>
              <CustomTextField placeholder={""} text={"XXXXXXXXXXX"} />

              <TextField
                id="outlined-multiline-static"
                multiline
                rows={2}
                defaultValue="XXXXXXXXXXX
                                XXXXXXXXXXX"
                sx={{
                  "& .MuiInputBase-root": {
                    backgroundColor: theme.palette.background.default,
                    borderRadius: "10px",
                  },
                }}
              />
              <Link
                component="button"
                sx={{
                  fontSize: "16px",
                  lineHeight: "19px",
                  color: theme.palette.brightPurple.main,
                  textDecorationColor: theme.palette.brightPurple.main,
                  textAlign: "left",
                  maxWidth: "372px",
                }}
              >
                Как подключить свой домен/поддомен к квизу? Ошибки при
                подключении домена
              </Link>
            </Box>

            <Box
              sx={{
                display: "flex",
                gap: "20px",
                flexDirection: "column",
              }}
            >
              <Typography>2. Укажите домен и сохраните квиз</Typography>

              <FormControl sx={{ m: 1, width: "100%" }} variant="outlined">
                <OutlinedInput
                  id="outlined-adornment-password"
                  type="text"
                  placeholder="XXXXXXXXXXX"
                  sx={{
                    "& .MuiInputBase-root": {
                      backgroundColor: theme.palette.background.default,
                      borderRadius: "10px",
                    },
                  }}
                  endAdornment={
                    <InputAdornment position="end">
                      <IconButton
                        // onClick={}
                        // onMouseDown={}
                        edge="end"
                      >
                        <CopyIcon
                          color={"#ffffff"}
                          bgcolor={theme.palette.brightPurple.main}
                        />
                      </IconButton>
                    </InputAdornment>
                  }
                  label="Password"
                />
              </FormControl>
            </Box>

            <Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
              <Typography
                sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
              >
                Привязка домена и обновление DNS записей может занять до 48
                часов
              </Typography>
              <Button variant="outlined" onClick={handleCloseDom}>
                Отмена
              </Button>
              <Button variant="contained">Готово</Button>
            </Box>
          </Box>
        </Box>
      </Modal>
    </>
  );
}