import {VetproviehElement, VetproviehBinding} from '../core';
import {ViewHelper} from '../helpers';

/**
 * HTML-Element with inner Databinding
 */
export class ElementBinding extends VetproviehElement {
  private _object: any;
  private uniqueId: number = ElementBinding.getNextUniqueId();

  private static nextUniqueId = 1;

  /**
     * Getting a unique id for binding
     * @return {number}
     */
  private static getNextUniqueId(): number {
    return this.nextUniqueId++;
  }

  /**
     * Default-Konstruktor
     */
  constructor() {
    super(false);
  }

  /**
    * Getter group
    * @return {any}
    */
  public get object(): any {
    return this._object;
  }

  /**
     * Setter group
     * @param {any} value
     */
  public set object(value: any) {
    if (this._object != value) {
      this._object = value;
      this.afterObjectSet();
    }
  }

  /**
     * After-Objekt Set, can be overriden
     */
  protected afterObjectSet() {
    console.debug('ElementBinding afterObjectSet can be overriden');
  }

  /**
     * Connected Callback
     */
  public connectedCallback() {
    this._beforeRender();
    this._renderTemplate();
    this._afterRender();
  }

  /**
     * Callback to Overwrite
     * @protected
     */
  protected _beforeRender() {
    console.debug('ElementBinding _beforeRender can be overriden');
  }

  /**
     * Callback to Overwrite
     * @protected
     */
  protected _afterRender() {
    console.debug('ElementBinding _afterRender can be overriden');
  }

  /**
     * Resetting innerHTML to a blank string
     */
  protected resetInnerHtml() {
    this.innerHTML = '';
  }

  /**
     * Building Template to Show
     * @return {HTMLElement}
     */
  private _buildTemplate(): HTMLElement {
    const div = document.createElement('div');
    div.innerHTML = this.template;
    ViewHelper.replacePlaceholders(div, this.object);
    return div;
  }

  /**
     * Render Template
     * @private
     */
  protected _renderTemplate() {
    this.resetInnerHtml();
    this.append(this._buildTemplate());
    VetproviehBinding.bindFormElements(this, this.object);
  }

  /**
    * Returning template
    * @return {string}
    */
  get template(): string {
    return '';
  }


  /**
      * Observed attributes
      * @return {Array<string>}
      */
  static get observedAttributes() {
    return ['object'];
  }
}