import type { ReactElement } from "react";
import ReactDom from "react-dom/server";
import type { TAppRenderModes } from "#package/types";
import { RenderContext } from "../../components/renderContext";
import { Localisation } from "../../plugins/localisation";
import { getPrettyHTML } from "../getPrettyHTML";

const { renderToStaticMarkup, renderToString } = ReactDom;

const getDefaultModifier = (str = "") => {
  const result = str.replaceAll(/<template data-comment="">([^"]*)<\/template>/g, "\n$1");
  return process.env.NODE_ENV === "production" ? getPrettyHTML(result) : result;
};

type TOptions = Partial<{
  before: string;
  after: string;
  getWithModifier: (str: string) => string;
  mode: Exclude<TAppRenderModes, "CSR">;
}>;

/**
 * Получает статичную разметку из React-компонента.
 * Используется вне браузерной среды, если вам необходимо использовать JS/TSx только как HTML-шаблонизатор. DOM-дерево может быть недоступно.
 * Функция дожидается загрузки плагина `Localisation`.
 * @param element{ReactElement} компонент
 * @param options{Object=} параметры получения
 * @param options.before{String=} строка, добавляемая до компонента
 * @param options.after{String=} строка, добавляемая после компонента
 * @param options.getWithModifier{Function=} функция, модифицирующая полученный HTML
 * @param options.mode{String=} режим получения данных ("SSG", "SSR")
 * @returns {Promise<string>} Возвращает Promise со строкой HTML, сформированной из переданного React-элемента в режиме `SSG` или `SSR`.
 * @example
 * import { getStaticMarkupForServer } from "@delement/ui/utils/react";
 *
 * const html = await getStaticMarkupForServer(<div>Hello</div>, { mode: "SSG" });
 */
const getStaticMarkupForServer = async (element: ReactElement, options?: TOptions): Promise<string> => {

  if (typeof window !== "undefined") {
    throw new Error(`[getStaticMarkupForServer] Function was called on client, use "getStaticMarkupForClient" instead`);
  }

  const {
    before = "<!DOCTYPE html>",
    after = "",
    getWithModifier = getDefaultModifier,
    mode = "SSG",
  } = (options || {});

  if (!element) {
    return Promise.resolve("");
  }

  const getLayout = () => {
    let layout;
    const Component = (
      <RenderContext mode={mode} isSSR={true}>
        {element}
      </RenderContext>
    );
    switch (mode) {
      case "SSG":
        layout = renderToStaticMarkup(Component);
        break;
      case "SSR":
        layout = renderToString(Component);
        break;
      default:
        layout = "";
    }
    return getWithModifier(`${before}${layout}${after}`);
  };

  return new Promise((resolve) => {
    const resolver = () => {
      const layout = getLayout();
      resolve(layout);
    };
    if (Localisation.instance) { // localization are ready
      resolver();
    } else { // wait for localization
      Localisation.create()
        .finally(() => {
          resolver();
        });
    }
  });
};

export {
  getStaticMarkupForServer,
};