import { bubble } from "@web3r/flowerkit/evt";
import { getDocument } from "ssr-window";
import { selectors } from "./constants/defaultCfg";
import { FormSend } from "./send";
import { FormValidation } from "./validation";
import { getInputForm } from "../../utils/getInputForm";

/**
 * Singleton. Плагин для работы с формами. Предоставляет возможность асинхронной отправки и валидации всех форм, для которых указан атрибут `data-js-form`.
 * @module Forms
 * @example
 * // <form data-js-form='{}'></form>
 */
export class Forms {

  static #instance: Forms | null = null;

  validation: FormValidation;

  send: FormSend;

  constructor() {
    if (Forms.#instance) {
      return Forms.#instance;
    }
    this.validation = new FormValidation();
    this.send = new FormSend();
    this.#bindEvents();
    Forms.#instance = this;
  }

  #handleClick(e: MouseEvent) {
    const { target } = e;
    if (target && (target as Element).matches("[type=\"submit\"]")) {
      const form = getInputForm(target as HTMLInputElement);
      if (form && form.matches(selectors.form)) {
        e.preventDefault();
        (form as HTMLFormElement & { handler?: HTMLElement; }).handler = target as HTMLElement;
        bubble(form, "submit");
      }
    }
  }

  #bindEvents() {
    getDocument().addEventListener("click", (e: Event) => this.#handleClick(e as MouseEvent));
  }

}