import {
  Component,
  Input,
  TemplateRef,
  ContentChildren,
  QueryList,
  Injector,
  Optional,
  OnInit,
  ChangeDetectionStrategy,
} from '@angular/core';
import {
  TypeResolver,
  AngularComponentId,
  ComponentId,
  StackPanelModel,
  FrameworkElement,
} from '@mobilize/wms-framework';

@Component({
  selector: 'wm-stack-panel',
  templateUrl: './stackpanel.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
@ComponentId([AngularComponentId.stackPanel])
export class StackPanelComponent implements OnInit {
  @Input()
  model: StackPanelModel;
  @ContentChildren(TemplateRef) viewChildren: QueryList<TemplateRef<any>>;
  items: {
    item: FrameworkElement;
    component?: any;
    template?: TemplateRef<any>;
    customInjector: Injector;
  }[] = [];
  isInitialized = false;

  constructor(
    private injector: Injector,
    @Optional() injectedModel: StackPanelModel
  ) {
    this.model = injectedModel;
  }

  refresh(): void {
    if (this.model) {
      if (this.items.length !== this.model.Children.count) {
        this.items = [];

        for (let i = 0; i < this.model.Children.count; i++) {
          const child = this.model.Children.getItem(i);
          let component = child.constructor;
          if (typeof child.AngularComponentId) {
            component = TypeResolver.getType(child.AngularComponentId);
          }
          const customInjector = Injector.create({
            providers: [
              { provide: child.constructor, useValue: child, deps: [] },
            ],
            parent: this.injector,
          });
          this.items.push({
            item: this.model.Children.getItem(i) as FrameworkElement,
            component,
            customInjector,
          });
        }
      }
    }
  }

  ngOnInit(): void {
    if (this.model) {
      this.model.change.addHandler(() => this.refresh());
      this.refresh();
    }
  }
}