class Wujie {
  constructor() {
    // 创建目标地址的解析,保证子应用与父应用是同域应用。来解决父子应用通信问题
    const { urlElement, appHostPath, appRoutePath } = appRouteParse(url);

    // 创建iframe
    this.iframe = iframeGenerator(
      this,
      attrs,
      mainHostPath,
      appHostPath,
      appRoutePath
    );
  }
}

function iframeGenerator(
  sandbox: WuJie,
  attrs: { [key: string]: any },
  mainHostPath: string,
  appHostPath: string,
  appRoutePath: string
): HTMLIFrameElement {
  const iframe = window.document.createElement("iframe");
  const attrsMerge = {
    src: mainHostPath,
    style: "display: none",
    ...attrs,
    name: sandbox.id,
    [WUJIE_DATA_FLAG]: "",
  };
  setAttrsToElement(iframe, attrsMerge);
  window.document.body.appendChild(iframe);
  // 停止加载 iframe 得到一个纯净的iframe
  sandbox.iframeReady = stopIframeLoading(iframeWindow).then(() => {});
  return iframe;
}

/**
 * 防止运行主应用的js代码，给子应用带来很多副作用
 */
// TODO 更加准确抓取停止时机
function stopIframeLoading(iframeWindow: Window) {
  const oldDoc = iframeWindow.document;
  // 在一开始 oldDoc 是blank
  // 加载html后就会变成具体的document对象
  return new Promise<void>((resolve) => {
    function loop() {
      setTimeout(() => {
        let newDoc;
        try {
          newDoc = iframeWindow.document;
        } catch (err) {
          newDoc = null;
        }
        // wait for document ready
        if (!newDoc || newDoc == oldDoc) {
          loop();
        } else {
          iframeWindow.stop
            ? iframeWindow.stop()
            : iframeWindow.document.execCommand("Stop");
          resolve();
        }
      }, 1);
    }
    loop();
  });
}

export async function startApp(
  startOptions: startOptions
): Promise<Function | void> {
  // 实例化js沙箱
  const newSandbox = new WuJie({
    name,
    url,
    attrs,
    degradeAttrs,
    fiber,
    degrade,
    plugins,
    lifecycles,
  });

  // 根据url请求对应的html文件
  const { template, getExternalScripts, getExternalStyleSheets } =
    await importHTML({
      url,
      html,
      opts: {
        fetch: fetch || window.fetch,
        plugins: newSandbox.plugins,
        loadError: newSandbox.lifecycles.loadError,
        fiber,
      },
    });
}

function getExternalScripts(): ScriptResultList {}
interface ScriptBaseObject {
  /** 脚本地址，内联为空 */
  src?: string;
  /** 脚本是否为async执行 */
  async?: boolean;
  /** 脚本是否为defer执行 */
  defer?: boolean;
  /** 脚本是否为module模块 */
  module?: boolean;
  /** 脚本是否设置crossorigin */
  crossorigin?: boolean;
  /** 脚本crossorigin的类型 */
  crossoriginType?: "anonymous" | "use-credentials" | "";
  /** 脚本正则匹配属性 */
  attrs?: ScriptAttributes;
}

type ScriptObject = ScriptBaseObject & {
  /** 内联script的代码 */
  content?: string;
  /** 忽略，子应用自行请求 */
  ignore?: boolean;
  /** 子应用加载完毕事件 */
  onload?: Function;
};

type ScriptResultList = (ScriptBaseObject & {
  // 获取 script code 的Promise
  contentPromise: Promise<string>;
})[];

function getExternalStyleSheets(): StyleResultList {}

interface StyleObject {
  /** 样式地址， 内联为空 */
  src?: string;
  /** 样式代码 */
  content?: string;
  /** 忽略，子应用自行请求 */
  ignore?: boolean;
}
type StyleResultList = {
  src: string;
  // 获取 样式内容的promise
  contentPromise: Promise<string>;
  ignore?: boolean;
}[];

export function defineWujieWebComponent() {
  const customElements = window.customElements;
  if (customElements && !customElements?.get("wujie-app")) {
    class WujieApp extends HTMLElement {
      connectedCallback(): void {
        if (this.shadowRoot) return;
        const shadowRoot = this.attachShadow({ mode: "open" });
        const sandbox = getWujieById(this.getAttribute(WUJIE_APP_ID));
        patchElementEffect(shadowRoot, sandbox.iframe.contentWindow);
        sandbox.shadowRoot = shadowRoot;
      }

      disconnectedCallback(): void {
        const sandbox = getWujieById(this.getAttribute(WUJIE_APP_ID));
        sandbox?.unmount();
      }
    }
    customElements?.define("wujie-app", WujieApp);
  }
}

// packages\wujie-core\src\sandbox.ts

class Wujie {
  async active() {
    // 预执行无容器，暂时插入iframe内部触发Web Component的connect
    const iframeBody = rawDocumentQuerySelector.call(
      iframeWindow.document,
      "body"
    ) as HTMLElement;
    this.el = renderElementToContainer(
      createWujieWebComponent(this.id),
      el ?? iframeBody
    );

    // 注意这个 iframeWindow 还是那个纯净的沙箱
    await renderTemplateToShadowRoot(
      this.shadowRoot,
      iframeWindow,
      this.template
    );
  }
}