import { Component, Input, Injector, Optional, OnInit } from '@angular/core';
import {
  ContentControlModel,
  ComponentId,
  AngularComponentId,
  TypeResolver,
  ModelProviderService,
} from '@mobilize/wms-framework';

@Component({
  selector: 'wm-content',
  templateUrl: './content.component.html',
  providers: [ModelProviderService],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
@ComponentId([AngularComponentId.contentControl])
export class ContentComponent implements OnInit {
  @Input()
  model: any;

  cached: any;

  get innerContent(): any {
    if (
      this.model?.Content &&
      this.model?.Content !== this.cached?.lastContent
    ) {
      const customInjector = Injector.create({
        providers: [
          {
            provide: this.model?.Content.constructor,
            useValue: this.model.Content,
            deps: [],
          },
        ],
        parent: this.injector,
      });

      this.cached = {
        component: TypeResolver.getType(this.model?.Content.AngularComponentId),
        customInjector,
        lastContent: this.model.Content,
      };
      return this.cached;
    } else {
      return this.cached;
    }
  }

  constructor(
    @Optional() protected injectedModel: ContentControlModel = null,
    private provider: ModelProviderService,
    private injector: Injector
  ) {}

  ngOnInit(): void {
    this.model = this.model ?? this.injectedModel ?? new ContentControlModel();
    this.provider.model = this.model;
  }
}