frontPanel/src/pages/InstallQuiz/QuizInstallationCard/QuizInstallationCard.tsx

import {
  Box,
  ButtonBase,
  IconButton,
  InputAdornment,
  TextField as MuiTextField,
  TextFieldProps,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useDomainDefine } from "@utils/hooks/useDomainDefine";
import { FC, useState } from "react";
import CopyIcon from "../../../assets/icons/CopyIcon";
import OneIconBorder from "../../../assets/icons/OneIconBorder";
import InstallationStepButton from "./InstallationStepButton";
import ContainerWidgetPreview from "./previewIcons/ContainerWidgetPreview";

const TextField = MuiTextField as unknown as FC<TextFieldProps>;

export default function QuizInstallationCard() {
  const theme = useTheme();
  const quiz = useCurrentQuiz();
  const { isTestServer } = useDomainDefine();
  const [stepState, setStepState] = useState("step1");
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));

  if (!quiz) return null;

  return (
    <Box
      sx={{
        backgroundColor: "#ffffff",
        padding: "20px",
        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: isSmallMonitor ? "flex-start" : "center",
          gap: "30px",
          flexDirection: isSmallMonitor ? "column" : "row",
        }}
      >
        <Typography variant="h5" sx={{ paddingRight: "30px" }}>
          Установка quiz на сайте
        </Typography>
        <InstallationStepButton
          active={stepState === "step1"}
          leftIcon={
            <OneIconBorder
              color={
                stepState === "step1" ? "#FC712F" : theme.palette.grey2.main
              }
            />
          }
          onClick={() => {
            setStepState("step1");
          }}
        >
          Способ установки
        </InstallationStepButton>
        <InstallationStepButton
          active={stepState === "step2"}
          leftIcon={
            <OneIconBorder
              color={
                stepState === "step2" ? "#FC712F" : theme.palette.grey2.main
              }
            />
          }
          onClick={() => {
            setStepState("step2");
          }}
        >
          Вставить код на сайт
        </InstallationStepButton>
      </Box>

      <Box
        sx={{
          padding: "20px",
          display: "flex",
          flexDirection: "column",
          gap: "30px",
        }}
      >
        {stepState === "step1" ? (
          <ButtonBase
            onClick={() => {
              setStepState("step2");
            }}
            sx={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "start",
              alignItems: "start",
              maxWidth: "205px",
              gap: "15px",
            }}
          >
            <ContainerWidgetPreview />
            <Typography>В тело сайта</Typography>
            <Typography
              sx={{
                fontSize: "16px",
                color: theme.palette.grey2.main,
                textAlign: "start",
              }}
            >
              Задайте свои размеры и встройте в сайт
            </Typography>
          </ButtonBase>
        ) : (
          <>
            <Box
              sx={{
                display: "flex",
                justifyContent: "space-between",
                flexDirection: "column",
              }}
            >
              <Box
                sx={{
                  maxWidth: "520px",
                  width: "100%",
                  display: "flex",
                  flexDirection: "column",
                  gap: "20px",
                }}
              >
                <Typography>1. Код вставки quiz</Typography>
                <Typography sx={{ color: theme.palette.grey2.main }}>
                  Установите код в то место, где должен быть quiz
                </Typography>
                <TextField
                  id="outlined-multiline-static"
                  multiline
                  rows={9}
                  value={`<div id="idpena"></div> <script type="module"> import widget from "https://${isTestServer ? "s." : ""}hbpn.link/export/pub.js"; widget.create({ selector: "idpena", quizId: "${quiz.qid}" }) </script>`}
                  sx={{
                    "& .MuiInputBase-root": {
                      maxWidth: "520px",
                      width: "100%",
                      backgroundColor: theme.palette.background.default,
                      fontSize: "18px",
                      alignItems: "flex-start",
                    },
                  }}
                  InputProps={{
                    endAdornment: (
                      <InputAdornment position="start">
                        <IconButton
                          edge="end"
                          sx={{ marginTop: "22px" }}
                          onClick={() =>
                            navigator.clipboard.writeText(
                              // TODO
                              document.getElementById(
                                "outlined-multiline-static",
                              ).value,
                            )
                          }
                        >
                          <CopyIcon
                            color={"#ffffff"}
                            bgcolor={theme.palette.brightPurple.main}
                          />
                        </IconButton>
                      </InputAdornment>
                    ),
                  }}
                />
              </Box>
            </Box>
            <Box
              sx={{
                background: "#EEE4FC",
                border: "1px solid #7E2AEA",
                padding: "20px 50px 20px 20px",
                borderRadius: "8px",
                display: "flex",
                flexDirection: "column",
                gap: "20px",
                marginBottom: "20px",
              }}
            >
              <Typography>
                Код нужно вставить один раз. Изменения в самом quiz будут
                отображаться автоматически после сохранения.
              </Typography>
              <Typography>
                Для установки размера добавьте в тег значения высоты и ширины,
                например:
              </Typography>
              <Typography>
                {`<div id="idpena" style="width: 600px;height: 600px;"></div>`}
              </Typography>
            </Box>
          </>
        )}
      </Box>
    </Box>
  );
}