import {
  Directive,
  Input,
  OnChanges,
  ViewContainerRef,
  ComponentFactoryResolver,
  ComponentRef
} from '@angular/core';
import { GaugeComponent } from 'src/modules/chart/component/gauge.component';
import { GraphComponent } from 'src/modules/chart/component/graph.component';
import { LineComponent } from 'src/modules/chart/component/line.component';

const components = {
  gaugeComponent: GaugeComponent,
  graphComponent: GraphComponent,
  lineChart: LineComponent
};

@Directive({
  selector: '[appLayoutItem]'
})
export class LayoutItemDirective implements OnChanges {
  @Input() componentRef: string;

  component: ComponentRef<any>;

  constructor(
    private container: ViewContainerRef,
    private resolver: ComponentFactoryResolver
  ) {}

  ngOnChanges(): void {
    const component = components[this.componentRef];

    if (component) {
      const factory = this.resolver.resolveComponentFactory<any>(component);
      this.component = this.container.createComponent(factory);
    }
  }
}
