import { createElement } from "react";
import { Map as MapComponent } from "../../components/map";
import type { IMapRef } from "../../components/map/config/types";
import { Collection } from "../collection";
import type { TCollectionElement, TCollectionItemDefaultCfg } from "../collection";
import { CollectionReactItem } from "../collectionReactItem";

type TCollectionArgs = [ string, typeof Map, boolean? ];

/**
 * Класс для рендеринга элемента коллекции карт статичной верстки
 */
export class Map extends CollectionReactItem<TCollectionItemDefaultCfg, IMapRef> {

  constructor(el: TCollectionElement, params?: TCollectionItemDefaultCfg) {
    if (!(el instanceof HTMLElement)) {
      throw new TypeError(`[Map] HTMLElement is expected, but got "${el?.constructor?.name || typeof el}"`);
    }
    super(el, MapCollection.selector);
    this.render();
  }

  render() {
    this.onBeforeMount();
    this.root.render(createElement(MapComponent, {
      onUnmount: this.onUnmount.bind(this),
      onMount: this.onMount.bind(this),
      ref: this.ref,
      ...this.cfg,
    }));
  }

}

/**
 * Плагин для автоматического рендера карт. Является коллекцией.
 * @module MapCollection
 * @memberof Collection
 * @example
 * // <div data-js-yandex-map='{}'><div>
 */
export class MapCollection extends Collection<Map> {

  /**
   * Признак регистрации коллекции в глобальном namespace Core.
   * @type {boolean}
   */
  static isApp = true;

  /**
   * CSS-селектор контейнеров карт для автоподключения коллекции.
   * @type {string}
   */
  static selector = "[data-js-yandex-map]";

  constructor(...args: TCollectionArgs) {
    const defaultArgs: TCollectionArgs = [ MapCollection.selector, Map, true ];
    const finalArgs = args.length ? args : defaultArgs;
    super(...finalArgs);
  }

}