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

@Component({
  selector: 'wm-ellipse',
  templateUrl: './ellipse.component.html',
  styleUrls: ['./ellipse.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
@ComponentId([AngularComponentId.ellipse])
export class EllipseComponent {
  @Input()
  model: EllipseModel;
  constructor(
    @Optional() injectedModel: EllipseModel,
    private element: ElementRef<HTMLElement>,
    private changeDetectorRef: ChangeDetectorRef
  ) {
    this.model = injectedModel;
  }
  getStyle(): any {
    const resultStyle: { [prop: string]: string } = {};
    if (this.model) {
      if (this.model.Fill !== undefined) {
        resultStyle['background-color'] = this.model.Fill;
      }
      if (this.model.width !== undefined) {
        /* tslint:disable-next-line:no-string-literal */
        resultStyle['width'] = `${this.model.width.toString()}px`;
      }
      if (this.model.height !== undefined) {
        /* tslint:disable-next-line:no-string-literal */
        resultStyle['height'] = `${this.model.height.toString()}px`;
      }
    }
    return resultStyle;
  }
  ngOnInit(): void {
    this.model = this.model || new EllipseModel();
    syncComponentAndModel(this.element.nativeElement, this.model);
    this.model.change.addHandler((propertyName) => {
      this.changeDetectorRef.markForCheck();
    });
  }
}