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

type isExpanded = "panel1" | "panel2";

export default function OnButtonInstall() {
  const theme = useTheme();

  const [isExpanded, setIsExpanded] = useState<isExpanded>("panel1");
  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",
                justifyContent: "center",
                alignItems: "center",
                height: "100%",
              }}
            >
              <Button variant="contained">Пройти тест</Button>
            </Box>
          </Box>
          <Typography
            sx={{ fontSize: "14px", color: theme.palette.grey2.main }}
          >
            Если quiz уже установлен на сайт, и вы что-то здесь изменили, код на
            сайте нужно будет поменять. Настройки в этом конструкторе не
            сохраняются.
          </Typography>
        </Box>
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            width: "100%",
          }}
        >
          <AccordMy
            header={"Конструктор кнопки"}
            isExpanded={isExpanded === "panel1"}
            onClick={() => setIsExpanded("panel1")}
            sx={{ display: "flex", flexDirection: "column" }}
          >
            <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, marginBottom: "14px" }}
            >
              Текст кнопки
            </Typography>
            <CustomTextField placeholder={"Пройти тест"} maxLength={30} />
          </AccordMy>
          <AccordMy
            header={"Своя кнопка"}
            isExpanded={isExpanded === "panel2"}
            onClick={() => setIsExpanded("panel2")}
            sx={{ display: "flex", flexDirection: "column", width: "100%" }}
          >
            <Typography sx={{ color: theme.palette.grey2.main }}>
              Ссылка для вашей кнопки
            </Typography>
            <CustomTextField
              placeholder={""}
              maxLength={200}
              text={"#popup:639727c5177be5004f11a0f2"}
            />
            <Typography sx={{ color: theme.palette.grey2.main }}>
              Или событие
            </Typography>
            <CustomTextField
              placeholder={""}
              text={'onclick=":639727c5177be5004f11a0f2'}
              maxLength={20}
            />
          </AccordMy>

          <Link
            component="button"
            sx={{
              fontSize: "16px",
              padding: "15px 0",
              lineHeight: "19px",
              color: theme.palette.brightPurple.main,
              textDecorationColor: theme.palette.brightPurple.main,
              textAlign: "left",
            }}
          >
            + Автооткрытие quiz
          </Link>
        </Box>
      </InstallQzOnSiteParent>
    </>
  );
}