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

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(false);
  useEffect(() => {
    const launch = () => setOpen(true);
    window.addEventListener(QUICK_PRODUCT_EVENT, launch);
    return () => window.removeEventListener(QUICK_PRODUCT_EVENT, launch);
  }, []);

  if (!open) return null;
  return (
    <Suspense fallback={
      <Modal isOpen title={__("Create subscription product", "arraysubs")} onClose={() => setOpen(false)}>
        <p role="status">{__("Loading product creator…", "arraysubs")}</p>
      </Modal>
    }>
      <QuickProductWizard onClose={() => setOpen(false)} />
    </Suspense>
  );
}