import { Component, Input, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { FrameworkElement } from '@mobilize/wms-framework';
import { ContainerDirective } from '../../directives/container.directive';

/**
 * Angular component for the canvas item to implement the custom layout
 *
 * @export
 * @class CanvasItemComponent
 * @implements {OnInit}
 * @implements {OnDestroy}
 */
@Component({
  selector: 'wm-canvas-item',
  templateUrl: './canvas-item.component.html',
  styleUrls: ['./canvas-item.component.scss'],
})
export class CanvasItemComponent implements OnInit, OnDestroy {
  /**
   * Model of the child control that will allow the custom layout
   *
   * @type {FrameworkElement}
   * @memberof CanvasItemComponent
   */
  @Input()
  itemInfo: FrameworkElement;

  /**
   * Keeps a reference to the DOM container to inject the new components
   */
  @ViewChild(ContainerDirective, { static: true })
  componentContainer: ContainerDirective;

  /**
   * Components top property that allows the custom layout
   *
   * @memberof CanvasItemComponent
   */
  top = '0px';

  /**
   * Components left property that allows the custom layout
   *
   * @memberof CanvasItemComponent
   */
  left = '0px';

  /**
   * Handler for the DependencyObject properties
   *
   * @memberof CanvasItemComponent
   */
  changeHandler: (name: string) => void;

  /**
   * Angular LifeCycle hook
   *
   * @memberof CanvasItemComponent
   */
  ngOnInit(): void {
    this.changeHandler = (name: string) => {
      this.sync(name);
    };
    this.itemInfo.change.addHandler(this.changeHandler);
    this.sync('canvas_left_property');
    this.sync('canvas_top_property');
  }

  /**
   * Angular LifeCycleHook
   *
   * @memberof CanvasItemComponent
   */
  ngOnDestroy(): void {
    this.itemInfo.change.removeHandler(this.changeHandler);
  }

  /**
   * Method that allows the synchronizing of the left and top properties
   *
   * @private
   * @param {string} name
   * @memberof CanvasItemComponent
   */
  private sync(name: string): void {
    if (name === 'canvas_left_property') {
      const value =
        parseInt(this.itemInfo.getValue('canvas_left_property'), 10) || 0;
      this.left = `${value}px`;
    } else if (name === 'canvas_top_property') {
      const value =
        parseInt(this.itemInfo.getValue('canvas_top_property'), 10) || 0;
      this.top = `${value}px`;
    }
  }
}