import { Component, OnInit, Input, Inject, AfterViewInit, ChangeDetectionStrategy, HostListener, OnDestroy, HostBinding, ChangeDetectorRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { DOCUMENT } from '@angular/common';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { fromEvent, Subscription } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
	selector: 'div[product-config-main]',
	templateUrl: './product-config-main.component.html',
	styleUrls: ['./product-config-main.component.scss']
})
export class ProductConfigMainComponent implements OnInit, AfterViewInit, OnDestroy {

	@Input() entity: any;
	setHeight: any;
	iframeId: string;
	title: string;
	iframe;
	subscription: Subscription;
	url;
	readonly CAD_ORIGIN = 'https://webassistants.partcommunity.com';

	@HostBinding('class') get class() { return 'col-md-8 space-between'; }

	constructor(private sanitizer: DomSanitizer,
		private idService: IdGeneratorService,
		private util: UtilService,
		@Inject(DOCUMENT) private document) { }

	ngOnInit() {
		this.title = this.util.extract(this.entity, 'Title') || '';
		this.iframeId = `iframe-id-${this.idService.getId()}`;
		this.url = this.sanitizer.bypassSecurityTrustResourceUrl(`${this.CAD_ORIGIN}/23d-libs/us_configurator/sa2/skf/index.vbb?info=${this.entity.ProductFamilyId}`);
	}


	ngAfterViewInit() {
		this.iframe = this.document.getElementById(this.iframeId);
		const source = fromEvent(window, 'message');
		const example = source.pipe(map(event => this.onLoad(event)));
		this.subscription = example.subscribe(() => {});
	}

	ngOnDestroy() {
		this.subscription.unsubscribe();
	}

	onLoad(e) {
		console.log('onload');
		
		if (e.origin === this.CAD_ORIGIN) {
			console.log('change height');
			
			this.iframe.height = e.data.conf_height;
		}
	}

}