import { Box, Button, Link, Typography, useTheme } from "@mui/material";
import InstallQzOnSiteParent from "./InstallQzOnSiteParent";
import Dots from "../../assets/dots.png";
import React from "react";
import CustomTextField from "@ui_kit/CustomTextField";
import CustomCheckbox from "@ui_kit/CustomCheckbox";

export default function InBodyInstall() {
  const theme = useTheme();
  return (
    <InstallQzOnSiteParent>
      <Box sx={{ maxWidth: "560px" }}>
        <Box
          sx={{
            border: "1.5px solid #9A9AAF",
            borderRadius: "6px",
            maxWidth: "560px",
            height: "364px",
          }}
        >
          <Box
            sx={{
              background: theme.palette.background.default,
              borderBottom: "1.5px solid #9A9AAF",
              borderRadius: "6px 6px 0px 0px",
              minHeight: "34px",
              display: "flex",
              alignItems: "center",
              justifyContent: "end",
              paddingRight: "10px",
            }}
          >
            {" "}
            <img src={Dots} />
          </Box>
          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              gap: "40px",
              height: "100%",
            }}
          >
            <Box
              sx={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                width: "100%",
                maxWidth: "413px",
                minHeight: "133px",
                background: "#EEE4FC",
                borderRadius: "6px",
                border: "1px dashed #7E2AEA",
              }}
            >
              <Typography
                sx={{
                  color: theme.palette.brightPurple.main,
                  maxWidth: "365px",
                }}
              >
                Quiz будет открыть прямо в том месте, где вы установите код на
                сайте
              </Typography>
            </Box>

            <Typography sx={{ maxWidth: "414px", fontSize: "14px" }}>
              В мобильной версии будет показана кнопка, открывающая quiz в
              модальном окне
            </Typography>
          </Box>
        </Box>
        <Typography sx={{ fontSize: "14px", color: theme.palette.grey2.main }}>
          Если quiz уже установлен на сайт, и вы что-то здесь изменили, код на
          сайте нужно будет поменять. Настройки в этом конструкторе не
          сохраняются.
        </Typography>
      </Box>

      <Box sx={{ display: "flex", flexDirection: "column", gap: "15px" }}>
        <Typography>1. Задайте размеры (опционально)</Typography>
        <Box sx={{ display: "flex", gap: "40px" }}>
          <Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}>
            <Typography sx={{ color: theme.palette.grey2.main }}>
              Ширина (px)
            </Typography>
            <CustomTextField placeholder={"auto"} />
            <Typography sx={{ color: theme.palette.grey2.main }}>
              Радиус (px)
            </Typography>
            <CustomTextField placeholder={"0"} />
          </Box>
          <Box sx={{ display: "flex", flexDirection: "column", gap: "20px" }}>
            <Typography sx={{ color: theme.palette.grey2.main }}>
              Высота (px)
            </Typography>
            <CustomTextField placeholder={"auto"} />
            <Typography sx={{ color: theme.palette.grey2.main }}>
              Отступ (px)
            </Typography>
            <CustomTextField placeholder={"0"} />
          </Box>
        </Box>
        <Box sx={{ display: "flex", flexDirection: "column", gap: "15px" }}>
          <Typography>2. Настройте кнопку для мобильной версии</Typography>
          <Box
            sx={{
              display: "flex",
              gap: "40px",
            }}
          >
            <Typography sx={{ color: theme.palette.grey2.main }}>
              Цвет кнопки
            </Typography>
            <Box
              sx={{
                width: "20px",
                height: "20px",
                borderRadius: "50%",
                backgroundColor: theme.palette.brightPurple.main,
                border: "1px solid #4D4D4D",
              }}
            >
              {" "}
            </Box>
            <Typography sx={{ color: theme.palette.grey2.main }}>
              Цвет текста кнопки
            </Typography>
            <Box
              sx={{
                width: "20px",
                height: "20px",
                borderRadius: "50%",
                backgroundColor: "#ffffff",
                border: "1px solid #4D4D4D",
              }}
            >
              {" "}
            </Box>
          </Box>
          <CustomCheckbox label={"Отключить на мобильных устройствах"} />
          <CustomCheckbox label={"Закругленная"} />
          <CustomCheckbox label={"С тенью"} />
          <CustomCheckbox label={"С бликом"} />
          <CustomCheckbox label={"Кнопка на мобильной версии"} />
          <Typography sx={{ color: theme.palette.grey2.main }}>
            Текст кнопки
          </Typography>
          <CustomTextField placeholder={"Пройти тест"} />
          <Link
            component="button"
            sx={{
              fontSize: "16px",
              lineHeight: "19px",
              color: theme.palette.brightPurple.main,
              textDecorationColor: theme.palette.brightPurple.main,
              textAlign: "left",
            }}
          >
            + Автооткрытие quiz
          </Link>
        </Box>
      </Box>
    </InstallQzOnSiteParent>
  );
}