import {
  Component,
  ChangeDetectionStrategy,
  Input,
  ChangeDetectorRef,
  Optional,
} from '@angular/core';
import { ComponentId } from '@mobilize/wms-framework';
import { AngularComponentId } from '@mobilize/wms-framework';
import { RectangleModel } from '@mobilize/wms-framework';

@Component({
  selector: 'wm-rectangle',
  templateUrl: './rectangle.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
@ComponentId([AngularComponentId.rectangle])
export class RectangleComponent {
  @Input()
  public model: RectangleModel;
  public getStyle(): any {
    const result = {
      width: this.model.Width
        ? (this.model.Width || 0).toString() + 'px'
        : '100%',
      height: this.model.Height
        ? (this.model.Height || 0).toString() + 'px'
        : '100%',
      'background-color': this.model.Fill,
    };
    return result;
  }
  public clickHandler($event): boolean {
    if (this.model && this.model.MouseLeftButtonDown) {
      this.model.MouseLeftButtonDown.fire([this.model, {}]);
    }
    $event.preventDefault();
    $event.stopPropagation();
    return false;
  }

  public constructor(
    private changeDetectorRef: ChangeDetectorRef,
    @Optional() private injectedModel: RectangleModel
  ) {
    this.model = injectedModel;
  }
  ngOnInit(): void {
    this.model = this.model || this.injectedModel;
    if (this.model) {
      this.model.refreshCallBack = () => {
        this.changeDetectorRef.detectChanges();
      };
    }
  }
}