import { Box, Collapse, Typography, useMediaQuery, useTheme } from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import PenaTextField from "@ui_kit/PenaTextField";
import { ReactNode, useState } from "react";
import Dots from "@/assets/dots.png";
import WidgetScript from "../WidgetScript";
import { createPopupWidgetScriptText } from "../createWidgetScriptText";
import { useWidgetUrl } from "../useWidgetUrl";

interface Props {
  step: 2 | 3;
  nextButton: ReactNode;
}

export default function PopupWidgetSetup({ step, nextButton }: Props) {
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));
  const quiz = useCurrentQuiz();
  const widgetUrl = useWidgetUrl();
  const [widgetWidth, setWidgetWidth] = useState<string>("");
  const [widgetHeight, setWidgetHeight] = useState<string>("");
  const [hideOnMobile, setHideOnMobile] = useState<boolean>(false);
  const [autoShowQuizTime, setAutoShowQuizTime] = useState<number>(10);
  const [openOnLeaveAttempt, setOpenOnLeaveAttempt] = useState<boolean>(false);
  const [fullScreen, setFullScreen] = useState<boolean>(false);

  if (!quiz) return null;

  if (step === 3) {
    const scriptText = createPopupWidgetScriptText(
      {
        quizId: quiz.qid,
        hideOnMobile: hideOnMobile || undefined,
        autoShowQuizTime: autoShowQuizTime,
        openOnLeaveAttempt: openOnLeaveAttempt || undefined,
        fullScreen: fullScreen || undefined,
        dialogDimensions:
          !fullScreen && (widgetWidth || widgetHeight)
            ? {
                width: widgetWidth ? `${widgetWidth}px` : "100%",
                height: widgetHeight ? `${widgetHeight}px` : "100%",
              }
            : undefined,
      },
      widgetUrl
    );

    return <WidgetScript scriptText={scriptText} helperText="Установите код внутрь тэга head" />;
  }

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: isSmallMonitor ? "column" : "row",
        gap: "40px",
        p: "20px",
      }}
    >
      <Box
        sx={{
          flex: "1 1 0",
        }}
      >
        <Box
          sx={{
            border: "1.5px solid #9A9AAF",
            borderRadius: "6px",
          }}
        >
          <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",
              minHeight: "330px",
              p: "24px",
            }}
          >
            <Box
              sx={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                width: "100%",
                maxWidth: "506px",
                minHeight: "280px",
                background: "#EEE4FC",
                borderRadius: "6px",
                border: "1px dashed #7E2AEA",
                px: "40px",
              }}
            >
              <Typography sx={{ color: theme.palette.brightPurple.main }}>
                Quiz будет открываться через указанное время
              </Typography>
            </Box>
          </Box>
        </Box>
      </Box>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          gap: "15px",
          flex: "1 1 0",
        }}
      >
        <CustomCheckbox
          label="Квиз на весь экран"
          checked={fullScreen}
          handleChange={(e) => setFullScreen(e.target.checked)}
        />
        <Collapse in={!fullScreen}>
          <Box
            sx={{
              display: "flex",
              gap: "40px",
            }}
          >
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                gap: "20px",
              }}
            >
              <Typography sx={{ color: theme.palette.grey2.main }}>Ширина окна (px)</Typography>
              <PenaTextField
                type="number"
                value={widgetWidth}
                onChange={(e) => setWidgetWidth(e.target.value)}
                FormControlSx={{ maxWidth: "160px" }}
                placeholder="auto"
              />
            </Box>
            <Box
              sx={{
                display: "flex",
                flexDirection: "column",
                gap: "20px",
              }}
            >
              <Typography sx={{ color: theme.palette.grey2.main }}>Высота окна (px)</Typography>
              <PenaTextField
                type="number"
                value={widgetHeight}
                onChange={(e) => setWidgetHeight(e.target.value)}
                FormControlSx={{ maxWidth: "160px" }}
                placeholder="auto"
              />
            </Box>
          </Box>
        </Collapse>
        <Box
          sx={{
            display: "flex",
            gap: "10px",
            alignItems: "center",
          }}
        >
          <Typography sx={{ color: theme.palette.grey2.main }}>Показывать через</Typography>
          <PenaTextField
            type="number"
            value={autoShowQuizTime}
            onChange={(e) => setAutoShowQuizTime(parseInt(e.target.value))}
            FormControlSx={{
              width: "90px",
            }}
          />
          <Typography sx={{ color: theme.palette.grey2.main }}>секунд</Typography>
        </Box>
        <CustomCheckbox
          label="Открывать квиз при попытке уйти с сайта"
          checked={openOnLeaveAttempt}
          handleChange={(e) => setOpenOnLeaveAttempt(e.target.checked)}
        />
        <CustomCheckbox
          label="Отключать автооткрытие на мобильных устройствах"
          checked={hideOnMobile}
          handleChange={(e) => setHideOnMobile(e.target.checked)}
        />
        <Box
          sx={{
            display: "flex",
            justifyContent: "end",
            pt: "10px",
          }}
        >
          {nextButton}
        </Box>
      </Box>
    </Box>
  );
}
