import { Component, OnInit, Input, ViewChild, ChangeDetectionStrategy, HostBinding } from '@angular/core';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { ComponentLinkService } from 'src/app/core/services/component-link-service/component-link.service';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { ComponentLink } from 'src/app/core/interfaces/interfaces.component';

interface ProductInfoData {
	description: string;
	columnOne: string;
	columnTwo: string;
	ctaButtonLinks: ComponentLink[];
	imageVideoLinks;
}

@Component({
	selector: 'div[product-info-main]',
	templateUrl: './product-info-main.component.html',
	styleUrls: ['./product-info-main.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProductInfoMainComponent implements OnInit {

	@Input() entity;

	public data: ProductInfoData;
	// cannot be just a number, and canot include decimal point
	public carouselId = 'a' + ('' + this.idGenerator.getId()).slice(2);

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

	constructor(private linkService: ComponentLinkService,
				private util: UtilService,
				private idGenerator: IdGeneratorService
	) { }

	ngOnInit() {
		if (this.entity) {
			this.data = this.parseEntity();
		}
	}

	private parseEntity() {

		const links = this.util.extract(this.entity, 'CtaLinks') || [];
		const resolvedImageVideoLinks = (this.util.extract(this.entity, 'ImageVideo') || []).map(imageVideo => this.formatImageVideo(imageVideo));

		return  {
			description: this.util.extract(this.entity, 'Description', 'BodyText'),
			columnOne: this.util.extract(this.entity, 'ColumnOne'),
			columnTwo: this.util.extract(this.entity, 'ColumnTwo'),
			ctaButtonLinks:  links.map(link => this.linkService.parseLink(link)),
			imageVideoLinks: resolvedImageVideoLinks
		};

	}


	private formatImageVideo(imageVideo) {
		const url = this.util.extract(imageVideo, 'Url');
		const mimeType = this.util.extract(imageVideo, 'MimeType');
		// type should be image or video
		const type = mimeType ? mimeType.split('/')[0] : undefined;
		const altText = this.util.extract(imageVideo, 'Assetmetadata', 'Cmsdescription') || '';

		const formated = {
			url: url,
			altText: altText,
			type: type,
			mimeType: mimeType
		};
		return formated;
	}

}