import type { RefObject } from "react";
import { createElement, createRef } from "react";
import { FilesUploader as FilesUploaderApp } from "../../components/filesUploader";
import type { IFilesUploaderRef } from "../../components/filesUploader";
import { constants } from "../../constants";
import { Collection } from "../collection";
import type { TCollectionElement } from "../collection";
import { CollectionReactItem } from "../collectionReactItem";
import type { TValidationEvent } from "../forms/validation";

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

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

  ref: RefObject<IFilesUploaderRef | null>;

  constructor(el: TCollectionElement, params?: Record<string, unknown>) {
    super(el as HTMLElement, FilesUploaderCollection.selector, params);
    this.ref = createRef<IFilesUploaderRef | null>();
    this.render();
    this.#bindEvents();
  }

  render() {
    this.onBeforeMount();
    this.root.render(createElement(FilesUploaderApp, {
      ref: this.ref,
      onUnmount: this.onUnmount.bind(this),
      onMount: this.onMount.bind(this),
      ...this.cfg as Record<string, unknown>,
    }));
  }

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

  #bindEvents() {

    this.instance.addEventListener(constants.formBubbles.inputInvalid, this.#onValidation.bind(this) as EventListener);

    this.instance.addEventListener(constants.formBubbles.inputValid, this.#onValidation.bind(this) as EventListener);
  }

}

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

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

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

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

}