import { WidgetType } from "@frontend/squzanswerer";
import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { useState } from "react";
import InstallationStepButton from "./InstallationStepButton";
import BannerWidgetSetup from "./WidgetSetupByType/BannerWidgetSetup/BannerWidgetSetup";
import ButtonWidgetSetup from "./WidgetSetupByType/ButtonWidgetSetup/ButtonWidgetSetup";
import ContainerWidgetSetup from "./WidgetSetupByType/ContainerWidgetSetup";
import PopupWidgetSetup from "./WidgetSetupByType/PopupWidgetSetup";
import SideWidgetSetup from "./WidgetSetupByType/SideWidgetSetup/SideWidgetSetup";
import WidgetTypeButton from "./WidgetTypeButton";
import BannerWidgetPreview from "./previewIcons/BannerWidgetPreview";
import ButtonWidgetPreview from "./previewIcons/ButtonWidgetPreview";
import ContainerWidgetPreview from "./previewIcons/ContainerWidgetPreview";
import PopupWidgetPreview from "./previewIcons/PopupWidgetPreview";
import SideWidgetPreview from "./previewIcons/SideWidgetPreview";

type WidgetSetupSettings = {
  step: 1 | 2 | 3;
  widgetType: WidgetType;
};

export default function QuizInstallationCard() {
  const theme = useTheme();
  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1065));
  const quiz = useCurrentQuiz();
  const [widgetSetupSettings, setWidgetSetupSettings] = useState<WidgetSetupSettings>({
    step: 1,
    widgetType: "container",
  });

  if (!quiz) return null;

  const nextButton = (
    <Button
      onClick={() => setWidgetSetupSettings((prev) => ({ ...prev, step: 3 }))}
      variant="contained"
    >
      Далее
    </Button>
  );

  return (
    <Box
      sx={{
        backgroundColor: "#ffffff",
        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={{
          pt: "20px",
          pb: "10px",
          px: "20px",
          display: "flex",
          alignItems: isSmallMonitor ? "flex-start" : "center",
          gap: "20px",
          flexDirection: isSmallMonitor ? "column" : "row",
        }}
      >
        <Typography variant="h5">Установка quiz на сайте</Typography>
        <Box
          sx={{
            display: "flex",
            gap: isSmallMonitor ? "0" : "11px",
            alignItems: isSmallMonitor ? "flex-start" : "center",
            flexDirection: isSmallMonitor ? "column" : "row",
          }}
        >
          <InstallationStepButton
            state={widgetSetupSettings.step === 1 ? "active" : "done"}
            index={1}
            onClick={() => {
              setWidgetSetupSettings({
                step: 1,
                widgetType: "container",
              });
            }}
          >
            Способ установки
          </InstallationStepButton>
          {widgetSetupSettings.step !== 1 && (
            <>
              <InstallationStepButton
                state={widgetSetupSettings.step === 2 ? "active" : "done"}
                index={2}
                onClick={() => {
                  setWidgetSetupSettings((prev) => ({
                    ...prev,
                    step: 2,
                  }));
                }}
              >
                {installationStepButtonTextByWidgetType[widgetSetupSettings.widgetType]}
              </InstallationStepButton>
              <InstallationStepButton
                state={widgetSetupSettings.step === 3 ? "active" : "inactive"}
                index={3}
                onClick={() => {
                  setWidgetSetupSettings((prev) => ({
                    ...prev,
                    step: 3,
                  }));
                }}
              >
                Вставить код на сайт
              </InstallationStepButton>
            </>
          )}
        </Box>
      </Box>
      {widgetSetupSettings.step === 1 ? (
        <Box
          sx={{
            px: "12px",
            pt: "4px",
            pb: "14px",
            display: "flex",
            flexDirection: isSmallMonitor ? "column" : "row",
            flexWrap: "wrap",
            gap: "14px",
          }}
        >
          <WidgetTypeButton
            image={<ButtonWidgetPreview />}
            text1="По кнопке"
            text2="Конструктор кнопки или собственная кнопка"
            onClick={() => {
              setWidgetSetupSettings({
                step: 2,
                widgetType: "button",
              });
            }}
          />
          <WidgetTypeButton
            image={<BannerWidgetPreview />}
            text1="Баннером"
            text2="Сбоку или на всю ширину экрана"
            onClick={() => {
              setWidgetSetupSettings({
                step: 2,
                widgetType: "banner",
              });
            }}
          />
          <WidgetTypeButton
            image={<ContainerWidgetPreview />}
            text1="В тело сайта"
            text2="Задайте свои размеры и встройте в сайт"
            onClick={() => {
              setWidgetSetupSettings({
                step: 2,
                widgetType: "container",
              });
            }}
          />
          <WidgetTypeButton
            image={<PopupWidgetPreview />}
            text1="Автооткрытие"
            text2="Автооткрытие поп-ап на сайте"
            onClick={() => {
              setWidgetSetupSettings({
                step: 2,
                widgetType: "popup",
              });
            }}
          />
          <WidgetTypeButton
            image={<SideWidgetPreview />}
            text1="Виджет"
            text2="Сбоку страницы, как консультант"
            onClick={() => {
              setWidgetSetupSettings({
                step: 2,
                widgetType: "side",
              });
            }}
          />
        </Box>
      ) : (
        <>
          {widgetSetupSettings.widgetType === "container" && (
            <ContainerWidgetSetup
              step={widgetSetupSettings.step}
              nextButton={nextButton}
            />
          )}
          {widgetSetupSettings.widgetType === "button" && (
            <ButtonWidgetSetup
              step={widgetSetupSettings.step}
              nextButton={nextButton}
            />
          )}
          {widgetSetupSettings.widgetType === "banner" && (
            <BannerWidgetSetup
              step={widgetSetupSettings.step}
              nextButton={nextButton}
            />
          )}
          {widgetSetupSettings.widgetType === "popup" && (
            <PopupWidgetSetup
              step={widgetSetupSettings.step}
              nextButton={nextButton}
            />
          )}
          {widgetSetupSettings.widgetType === "side" && (
            <SideWidgetSetup
              step={widgetSetupSettings.step}
              nextButton={nextButton}
            />
          )}
        </>
      )}
    </Box>
  );
}

const installationStepButtonTextByWidgetType: Record<WidgetType, string> = {
  button: "Настройка кнопки",
  banner: "Настройка баннера",
  container: "Настройка квиза",
  popup: "Настройка автооткрытия",
  side: "Настройка виджета",
};
