import { Renderer2 } from '@angular/core';

export class ResizeHandle {
  protected _handle: Element;
  private _onResize;

  constructor(
    protected parent: Element,
    protected renderer: Renderer2,
    public type: string,
    public css: string,
    private onMouseDown: any,
    private existHandle?: Element
  ) {
    // generate handle div or using exist handle
    let handle = this.existHandle || renderer.createElement('div');
    renderer.addClass(handle, 'ng-resizable-handle');
    renderer.addClass(handle, css);

    // add default diagonal for se handle
    if (type === 'se') {
      renderer.addClass(handle, 'ng-resizable-diagonal');
    }

    // append div to parent
    if (this.parent && !this.existHandle) {
      parent.appendChild(handle);
    }

    // create and register event listener
    this._onResize = event => {
      onMouseDown(event, this);
    };
    handle.addEventListener('mousedown', this._onResize, { passive: false });
    handle.addEventListener('touchstart', this._onResize, { passive: false });

    // done
    this._handle = handle;
  }

  dispose() {
    this._handle.removeEventListener('mousedown', this._onResize);
    this._handle.removeEventListener('touchstart', this._onResize);

    if (this.parent && !this.existHandle) {
      this.parent.removeChild(this._handle);
    }
    this._handle = null;
    this._onResize = null;
  }

  get el() {
    return this._handle;
  }
}