export class UiElement {

  constructor(private elementID, private containerID, private viewClass) {
  }


  private getContainer() {
    return document.getElementById(this.containerID);
  }

  public createElement(html: string) {

    const container = this.getContainer();
    if (container) {
      container.appendChild(this.getElement(html));
    }
    // this.registerEvents(onConfirm, onCancel);
  }

  public delete() {
    const element = document.getElementById(this.elementID);
    if (element) {
      element.remove();
    }
  }

  public onClicked(listener: any) {
    this.registerEvent('click', listener);
  }


  public onChanged(listener: any) {
    this.registerEvent('change', listener);
  }


  public onBlur(listener: any) {
    this.registerEvent('blur', listener);
  }

  private registerEvent(event: string, listener: any) {
    const element = document.getElementById(this.elementID);
    element.addEventListener(event, (e) => {
      if (listener) {
        listener();
      }
      e.stopImmediatePropagation();
    });
  }


  private getElement(html: string) {
    const elemDiv = document.createElement('div');
    //elemDiv.id = this.elementID;
    elemDiv.className = this.viewClass;
    elemDiv.innerHTML = html;
    return elemDiv;
  }

  public getValue() {
    return (document.getElementById(this.elementID) as HTMLInputElement).value;
  }
}

