import { createElement } from "react";
import { Select as SelectApp } from "../../components/select";
import type { ISelectRef } from "../../components/select";
import { constants } from "../../constants";
import { Collection } from "../collection";
import type { TCollectionElement, TCollectionItemDefaultCfg } from "../collection";
import { CollectionReactItem } from "../collectionReactItem";
import type { TValidationEvent } from "../forms/validation";

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

const isValidationEvent = (event: Event): event is TValidationEvent => {
  return event instanceof CustomEvent && typeof event.detail === "object" && event.detail !== null;
};

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

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

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

  #onValidation(event: Event) {
    if (isValidationEvent(event)) {
      event.detail.updateValidationUI?.();
    }
  }

  #bindEvents() {
    this.instance.addEventListener(constants.formBubbles.inputInvalid, (e) => this.#onValidation(e));
    this.instance.addEventListener(constants.formBubbles.inputValid, (e) => this.#onValidation(e));
  }

}

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

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

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

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

}

export {
  Select,
  SelectCollection,
};