import React, { lazy, Suspense, useEffect, useState } from "react";
import { __ } from "@wordpress/i18n";
import Modal from "@libs/modal";
import { QUICK_PRODUCT_EVENT } from "./launch";
import "./quick-product.scss";

const QuickProductWizard = lazy(() => import("./QuickProductWizard"));

// Mounted above the routes so every ArraySubs admin page can open the wizard.
export default function QuickProductHost() {
  const [open, setOpen] = useState(null);
  useEffect(() => {
    const launch = (event) => setOpen(event.detail || {});
    window.addEventListener(QUICK_PRODUCT_EVENT, launch);
    return () => window.removeEventListener(QUICK_PRODUCT_EVENT, launch);
  }, []);

  if (!open) return null;
  return (
    <Suspense
      fallback={
        <Modal
          isOpen
          variant="boxed-fullscreen"
          contentMaxWidth={800}
          className="arraysubs-quick-product"
          title={__("Create subscription plan", "arraysubs")}
          onClose={() => setOpen(null)}
        >
          <div className="arraysubs-quick-product__body">
            <p role="status">{__("Loading product creator…", "arraysubs")}</p>
          </div>
        </Modal>
      }
    >
      <QuickProductWizard
        subscriptionOnly={open.subscriptionOnly}
        productType={open.productType}
        onClose={() => setOpen(null)}
      />
    </Suspense>
  );
}