import { bubble } from "@web3r/flowerkit/evt";
import { createRef } from "react";
import type { RefObject } from "react";
import { createRoot } from "react-dom/client";
import type { Root } from "react-dom/client";
import { getDocument } from "ssr-window";
import { Collection } from "../collection";
import type { TCollectionItemDefaultCfg } from "../collection";
import { CollectionItem } from "../collectionItem";

/**
 * Factory. Служит инициализатором React-компонентов и содержит те же поля, что и `CollectionItem`, а также `root`, куда будет монтироваться компонент, и метод `unmount` — для размонтирования при необходимости.
 * При монтировании и размонтировании триггерит всплывающие события на документ, которые можно найти в `Collection.bubbles`
 * @module CollectionReactItem
 * @memberof CollectionItem
 * @param element{Element} передаваемый элемент DOM
 * @param selector{String} передаваемый селектор элемента
 * @param defaultCfg{Object=} конфигурация плагина по умолчанию
 * @example
 * import { CollectionReactItem } from "@delement/ui/plugins"
 *
 * class MyPlugin extends CollectionReactItem {
 *
 *   constructor(el) {
 *     super(el);
 *     // console.debug(this.root, this.unmount);
 *   }
 *
 * }
 */
class CollectionReactItem<
  T extends TCollectionItemDefaultCfg = TCollectionItemDefaultCfg,
  TRef = unknown
> extends CollectionItem<T> {

  root: Root;

  ref: RefObject<TRef | null>;

  constructor(element: HTMLElement, selector = "", defaultCfg: T = {} as T) {
    super(element, selector, defaultCfg);
    /**
     * Элемент createRoot
     */
    this.root = createRoot(this.instance);
    /**
     * Референс на компонент
     */
    this.ref = createRef<TRef | null>();
  }

  /**
   * Callback, выполняющийся ДО НАЧАЛА монтирования компонента
   */
  onBeforeMount() {
  }

  /**
   * Callback, выполняющийся ПОСЛЕ размонтирования компонента
   */
  onUnmount() {
    bubble(getDocument(), Collection.bubbles.unmount, this);
  }

  /**
   * Callback, выполняющийся ПОСЛЕ монтирования компонента
   */
  onMount() {
    bubble(getDocument(), Collection.bubbles.mount, this);
  }

  /**
   * Размонтирует компонент
   */
  unmount() {
    this.root.unmount();
    this.onUnmount();
  }

}

export { CollectionReactItem };