import {
  Component,
  Input,
  ChangeDetectorRef,
  Optional,
  Injector,
  OnInit,
  OnDestroy,
} from '@angular/core';
import { CanvasModel } from '@mobilize/wms-framework';
import { FrameworkElement } from '@mobilize/wms-framework';
import { UIElement } from '@mobilize/wms-framework';
import { ComponentId } from '@mobilize/wms-framework';
import { AngularComponentId } from '@mobilize/wms-framework';
import { TypeResolver } from '@mobilize/wms-framework';

@Component({
  selector: 'wm-canvas-panel',
  templateUrl: './canvas.component.html',
  styleUrls: ['./canvas.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
@ComponentId([AngularComponentId.canvas])
export class CanvasPanelComponent implements OnInit {
  @Input()
  public model: CanvasModel;
  nestedComponents: {
    item: UIElement;
    component: any;
    customInjector: Injector;
  }[] = [];

  public constructor(
    private changeDetectorRef: ChangeDetectorRef,
    @Optional() private injectedModel: CanvasModel,
    private injector: Injector
  ) {
    this.model = injectedModel;
  }
  ngOnInit(): void {
    this.model = this.model || this.injectedModel || new CanvasModel();
    this.model.change.addHandler(() => {
      this.refresh();
    });
    this.refresh();
  }

  private refresh(): void {
    this.nestedComponents = this.createNestedComponents();
  }

  public createNestedComponents(): any {
    if (this.model) {
      return this.model.Children.internalArray.map((child) => {
        return {
          item: child,
          customInjector: Injector.create({
            providers: [
              {
                provide: child.constructor,
                useValue: child,
                deps: [],
              },
            ],
            parent: this.injector,
          }),
          component: TypeResolver.getType(child.AngularComponentId),
        };
      });
    } else {
      return [];
    }
  }
}

@Component({
  selector: 'wm-canvas-item',
  template: `<div
    style="position: absolute"
    [style.top]="top"
    [style.left]="left"
  >
    <ng-content></ng-content>
  </div>`,
})
export class CanvasItemComponent implements OnInit, OnDestroy {
  @Input()
  itemInfo: FrameworkElement;

  top = '0px';
  left = '0px';

  changeHandler: (name: string) => void;
  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');
  }
  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`;
    }
  }

  ngOnDestroy(): void {
    this.itemInfo.change.removeHandler(this.changeHandler);
  }
}