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

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

@Component({
	selector: 'div[page-detail-horizontal-header]',
	templateUrl: './page-detail-horizontal-header.component.html',
	styleUrls: ['./page-detail-horizontal-header.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class PageDetailHorizontalHeaderComponent 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.util.extract(this.entity, 'H1Title') || '';
		// Consider only first four logos
		this.logos = (this.util.extract(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;
	}

}