import { popupWebinar } from '../components/popup-webinar/popup-webinar.ts';
import { popupForm } from '../components/popup-form/popup-form.ts';

type PopupResources = {
  template: Promise<{ default: string }>;
  style: Promise<{ default: string }>[];
  run: () => void;
};

type ManualPopupManager = (
  document: ShadowRoot,
  onOpen: () => void,
  onClose: () => void,
) => Promise<false | PopupResources>;

export const manualPopupManager: ManualPopupManager = async (document, onOpen, onClose) => {
  const url = new URL(window.location.href);

  const popupMap: Record<string, () => Promise<PopupResources>> = {
    '#popup-form': async () => {
      return {
        template: import('../components/popup-form/popup-form.html?raw'),
        style: [import('../scss/index-popup-form.scss?inline')],
        run: () => popupForm(document, onOpen, onClose),
      };
    },
    '#popup-webinar': async () => {
      return {
        template: import('../components/popup-webinar/popup-webinar.html?raw'),
        style: [import('../scss/index-popup-webinars.scss?inline')],
        run: () => popupWebinar(document, onOpen, onClose),
      };
    },
  };

  const popupFactory = popupMap[url.hash];
  return popupFactory ? await popupFactory() : false;
};