// App.js
import React, { lazy, Suspense } from "react";

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

// Example
<Suspense fallback={<Spinner />}>
  <About />
</Suspense>;

function lazy(loader) {
  return function LazyWrapper(props) {
    return <LazyComponent {...props} loader={loader} />;
  };
}

class LazyComponent extends React.Component {
  constructor(loader) {
    super();
    this.state = {
      // 실제로는 Suspense 관련 구현이 들어갈 것 (Promise)
      component: null,
    };
    this.loader = loader;
  }

  componentDidMount() {
    this.loader().then((module) => {
      this.setState({
        component: module.default,
      });
    });
  }

  render() {
    const { component: LoadedComponent } = this.state;
    return LoadedComponent ? <LoadedComponent {...this.props} /> : null;
  }
}

// input
var modP = import("mod");
// output (CJS)
var modP = Promise.resolve().then(() =>
  babelHelpers.interopRequireWildcard(require("mod"))
);
// output (AMD)
define(["require"], function (_require) {
  var modP = new Promise((_resolve, _reject) =>
    _require(
      ["mod"],
      (imported) => _resolve(babelHelpers.interopRequireWildcard(imported)),
      _reject
    )
  );
});

// https://github.com/tc39/proposal-dynamic-import#using-host-specific-mechanisms
function importModule(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script");
    const tempGlobal =
      "__tempModuleLoadingVariable" + Math.random().toString(32).substring(2);
    script.type = "module";
    script.textContent = `import * as m from "${url}"; window.${tempGlobal} = m;`;

    script.onload = () => {
      resolve(window[tempGlobal]);
      delete window[tempGlobal];
      script.remove();
    };

    script.onerror = () => {
      reject(new Error("Failed to load module script with URL " + url));
      delete window[tempGlobal];
      script.remove();
    };

    document.documentElement.appendChild(script);
  });
}

// https://github.com/facebook/react/blob/main/packages/react/src/ReactLazy.js
import type { Wakeable, Thenable } from "shared/ReactTypes";

import { REACT_LAZY_TYPE } from "shared/ReactSymbols";

const Uninitialized = -1;
const Pending = 0;
const Resolved = 1;
const Rejected = 2;

// 타입 관련 코드 생략

function lazyInitializer<T>(payload: Payload<T>): T {
  if (payload._status === Uninitialized) {
    const ctor = payload._result;
    const thenable = ctor(); // ctor = ConstrucTOR 인듯 ㅋㅋㅋ
    // Transition to the next state.
    // This might throw either because it's missing or throws. If so, we treat it
    // as still uninitialized and try again next time. Which is the same as what
    // happens if the ctor or any wrappers processing the ctor throws. This might
    // end up fixing it if the resolution was a concurrency bug.
    thenable.then(
      (moduleObject) => {
        if (payload._status === Pending || payload._status === Uninitialized) {
          // Transition to the next state.
          const resolved: ResolvedPayload<T> = (payload: any);
          resolved._status = Resolved;
          resolved._result = moduleObject;
        }
      },
      (error) => {
        if (payload._status === Pending || payload._status === Uninitialized) {
          // Transition to the next state.
          const rejected: RejectedPayload = (payload: any);
          rejected._status = Rejected;
          rejected._result = error;
        }
      }
    );
    if (payload._status === Uninitialized) {
      // In case, we're still uninitialized, then we're waiting for the thenable
      // to resolve. Set it as pending in the meantime.
      const pending: PendingPayload = (payload: any);
      pending._status = Pending;
      pending._result = thenable;
    }
  }
  if (payload._status === Resolved) {
    const moduleObject = payload._result;

    // 개발 환경 분기 생략
    return moduleObject.default;
  } else {
    throw payload._result;
  }
}

export function lazy<T>(
  ctor: () => Thenable<{ default: T, ... }>
): LazyComponent<T, Payload<T>> {
  const payload: Payload<T> = {
    // We use these fields to store the result.
    _status: Uninitialized,
    _result: ctor,
  };

  const lazyType: LazyComponent<T, Payload<T>> = {
    $$typeof: REACT_LAZY_TYPE,
    _payload: payload,
    _init: lazyInitializer,
  };

  // 개발 환경 분기 생략

  return lazyType;
}

const thenable = {
  then: function (onFulfilled) {
    setTimeout(() => {
      onFulfilled("Hello, thenable!");
    }, 1000);
  },
};

thenable.then((value) => {
  console.log(value); // 출력: "Hello, thenable!"
});