import {
  AfterContentInit,
  Directive,
  ElementRef,
  HostBinding,
  Input,
} from '@angular/core';
import { BaseDirective, CanvasModel } from '@mobilize/wms-framework';

/**
 * Angular Directive for the Canvas Control.
 *
 * Note: Consider bringing @Input zindex from baseCompoent to here, refactoring this directive
 * so all inputs are declared in here, and all @HostBindings are declared
 * in baseComponent, the directive would be responsible for updating the models, while
 * baseComponent will be responsible for binding the values: zIndex, Top, Left...
 *
 * @export
 * @class CanvasDirective
 */
@Directive({
  selector: '[wmCanvas]',
})
export class CanvasDirective extends BaseDirective implements AfterContentInit {
  /**
   * Property that intercepts a model
   *
   * @type {*}
   * @memberof CanvasDirective
   */
  @Input()
  model: any;

  /**
   * Rendering flag which indicates that the directive was already loaded.
   *
   * @private
   * @memberof CanvasDirective
   */
  private renderingFlag = true;

  /**
   * Directive internal value for the top property
   *
   * @private
   * @type {*}
   * @memberof CanvasDirective
   */
  private dirTopValue: any;

  /**
   * Directive internal value for the left property
   *
   * @private
   * @type {*}
   * @memberof CanvasDirective
   */
  private dirLeftValue: any;

  /**
   * Constructor.
   *
   * @memberof CanvasDirective
   */
  constructor(private elementRef: ElementRef) {
    super();
  }

  /**
   * Property used to set the canvas top value.
   *
   * @type {number}
   * @memberof CanvasDirective
   */
  @Input() set top(value: number) {
    this.dirTopValue = value;
    /* istanbul ignore else */
    if (!this.renderingFlag) {
      this.setTop();
    }
  }

  /**
   * Method which update the value of the top property to the model using the internal directive value
   *
   * @returns
   * @memberof CanvasDirective
   */
  setTop() {
    if (this.model && this.model.getValue(CanvasModel.TopProperty)) {
      return;
    }

    if (
      this.dirTopValue &&
      typeof this.dirTopValue === 'number' &&
      this.model
    ) {
      this.model.setValue(CanvasModel.TopProperty, this.dirTopValue);
    }
  }

  /**
   * Property used to set the canvas left  value.
   *
   * @type {number}
   * @memberof CanvasDirective
   */
  @Input() set left(value: number) {
    this.dirLeftValue = value;
    if (!this.renderingFlag) {
      this.setLeft();
    }
  }

  /**
   * Method which update the value of the left property to the model using the internal directive value
   *
   * @returns
   * @memberof CanvasDirective
   */
  setLeft() {
    if (this.model && this.model.getValue(CanvasModel.LeftProperty)) {
      return;
    }

    if (
      this.dirLeftValue &&
      typeof this.dirLeftValue === 'number' &&
      this.model
    ) {
      this.model.setValue(CanvasModel.LeftProperty, this.dirLeftValue);
    }
  }

  /**
   * After content init method
   *
   * @memberof CanvasDirective
   */
  ngAfterContentInit() {
    this.loadModel(this.elementRef);
    this.renderingFlag = false;
    this.setTop();
    this.setLeft();
  }

  /**
   * Sets the top style.
   *
   * @readonly
   * @memberof CanvasDirective
   */
  @HostBinding('style.top')
  get topValue() {
    if (this.model) {
      const topValue =
        parseInt(this.model.getValue('canvas_top_property'), 10) || 0;
      return `${topValue}px`;
    }
    return '0px';
  }

  /**
   * Sets the top style.
   *
   * @readonly
   * @memberof CanvasDirective
   */
  @HostBinding('style.left')
  get leftValue() {
    if (this.model) {
      const leftValue =
        parseInt(this.model.getValue('canvas_left_property'), 10) || 0;
      return `${leftValue}px`;
    }
    return '0px';
  }

  /**
   * Sets the position style.
   *
   * @readonly
   * @memberof CanvasDirective
   */
  @HostBinding('style.position')
  get positionValue() {
    if (this.model) {
      return 'absolute';
    }
    return 'unset';
  }

  /**
   * Sets the model in the component
   *
   * @readonly
   * @memberof CanvasDirective
   */
  @HostBinding('model')
  get modelValue() {
    return this.model;
  }
}