import { Component, OnInit, Input, ChangeDetectionStrategy, HostBinding, Inject } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { DOCUMENT } from '@angular/common';

interface Logo {
	altText: string;
	url: string;
}

@Component({
	selector: 'div[page-detail-header]',
	templateUrl: './page-detail-header.component.html',
	styleUrls: ['./page-detail-header.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class PageDetailHeaderComponent implements OnInit {
	
	@Input() entity;
	@Input() region;
	
	public h1: string;
	public logos;

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

	constructor(
		private util: UtilService,
		private titleService: Title,
		@Inject(DOCUMENT) private document
	) { }

	ngOnInit() {
		this.titleService.setTitle(this.util.extract(this.entity, 'BrowserTabTitle') || 'SKF.com');
		this.h1 = this.entity.H1Title;
		// Consider only first four logos
		this.logos = (this.entity.Logo || []).slice(0, 4).map(e => this.jsonToLogo(e));

		// Add meta data tags to DOM head.
		const metaTags = this.util.extract(this.entity, 'MetaTag') || [];
		metaTags.forEach(metaTag => {
			const tagName = this.util.extract(metaTag, 'MetaName');
			const tagValue = this.util.extract(metaTag, 'MetaTag');
			if (tagName && tagValue) {
				const meta = this.document.createElement('meta');
				meta.name = tagName;
				meta.content = tagValue;
				this.document.getElementsByTagName('head')[0].appendChild(meta);
			}
		});
	}
	public jsonToLogo(json): Logo {
		const url = this.util.extract(json, 'Url') || '';
		const altText = this.util.extract(json, 'Assetmetadata', 'Cmsdescription') || '';
		const logo: Logo = {
			altText: altText,
			url: url
		};

		return logo;
	}

}