import { Component, Input, ViewChild, ViewContainerRef, NgModuleFactoryLoader, Injector, AfterViewInit, NgModuleFactory, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import * as entityMapping from 'src/app/shared/constants/entity-mapping';
import { ConstantsService } from 'src/app/shared/constants/constants.service';
import { AppConfig } from '../../app.config';

@Component({
	selector: '[dxa-entity]',
	templateUrl: './dxa-entity.component.html',
})
export class DxaEntityComponent implements OnInit, AfterViewInit, OnDestroy {

	@Input() entities;
	@Input() region;

	environment: string;
	viewName: string;
	isFullWidth: boolean;

	@ViewChild('comp', { read: ViewContainerRef }) component: ViewContainerRef;

	componentRefs = [];

	constructor(
		private loader: NgModuleFactoryLoader,
		private injector: Injector,
		private util: UtilService,
		private constants: ConstantsService,
		private cdRef: ChangeDetectorRef,
	) { }

	ngOnInit(): void {
		this.environment = AppConfig.settings.env.name;
		this.isFullWidth = this.constants.FULL_WIDTH_COMPONENTS.includes(this.entities[0].MvcData.ViewName);
	}

	ngAfterViewInit(): void {
		this.createComponents();
		this.cdRef.detectChanges();
	}

	/** Loop through entity list and create components in DOM. */
	async createComponents() {
		for (let i = 0; i < this.entities.length; i++) {
			const component = this.entities[i];
			const viewName = this.util.extract(component, 'MvcData', 'ViewName');
			const path = entityMapping.entityToModule[viewName];
			const entryComponent = entityMapping.entityToComponent[this.region][viewName];

			if (entryComponent) {
				// Lazy load module, await to make rendering of components synchronous.
				await this.loader.load(path).then((moduleFactory: NgModuleFactory<any>) => {
					const moduleRef = moduleFactory.create(this.injector);
					// Resolve and create component
					const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);

					const componentRef = this.component.createComponent(compFactory);
					this.componentRefs.push(componentRef);

					// Give required inputs to component
					if (compFactory.inputs.find(comp => comp.propName === 'entity')) {
						componentRef.instance['entity'] = component;
					}

					if (compFactory.inputs.find(comp => comp.propName === 'region')) {
						componentRef.instance['region'] = this.region;
					}

					// Set id to component element, used to scroll to component from shortcut.
					componentRef.location.nativeElement.setAttribute('id', this.util.getComponentId(component));

				});
			} else if (!entryComponent && this.environment === 'dev') {	// Log to console if component is not found (only in dev).
				console.error(`NO MATCHING VIEW: ${viewName}`);
			}
		}
	}

	// Destroy all children when this component is destroyed.
	ngOnDestroy(): void {
		this.componentRefs.forEach(ref => {
			ref.destroy();
		});
	}


}