import type { RefObject } from "react";
import { createElement } from "react";
import { DatePicker as DatePickerApp } from "../../components/datePicker";
import type { IDatePickerRef } from "../../components/datePicker/config/types";
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 DatePicker, boolean? ];

/**
 * Класс для рендеринга элемента коллекции календарей статичной верстки
 */
export class DatePicker extends CollectionReactItem {

  constructor(el: TCollectionElement, params: TCollectionItemDefaultCfg = {}) {
    super(el as HTMLElement, DatePickerCollection.selector, params);
    this.render();
    this.#bindEvents();
  }

  render() {
    this.onBeforeMount();
    this.root.render(createElement(DatePickerApp, {
      ref: this.ref as RefObject<IDatePickerRef | null>,
      onUnmount: this.onUnmount.bind(this),
      onMount: this.onMount.bind(this),
      ...this.cfg,
    }));
  }

  #onValidation({ detail }: TValidationEvent) {
    if (detail.updateValidationUI) {
      detail.updateValidationUI();
    }
  }

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

}

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

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

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

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

}