import { Component, OnInit, Input, ChangeDetectionStrategy, Inject, 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 { DOCUMENT } from '@angular/common';
import { ComponentLink } from 'src/app/core/interfaces/interfaces.component';

interface IRelatedLinks {
	icon: string;
	title: string;
	linkTargets: ComponentLink[];
	image: IRelatedLinkImage;
	readMoreTitle: string;
	readMoreLink: any;
}

interface IRelatedLinkImage {
	mediaUrl: string;
	mimeType: string;
}

@Component({
	selector: 'div[related-links-top]',
	templateUrl: './related-links-top.component.html',
	styleUrls: ['./related-links-top.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class RelatedLinksTopComponent implements OnInit {

	@Input() entity;

	data: IRelatedLinks;
	inDarkMode: boolean;

	constructor(
		private util: UtilService,
		private linkService: ComponentLinkService,
		@Inject(DOCUMENT) private doc: Document
	) { }

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

	ngOnInit() {
		if (this.entity) {
			this.data = this.parseJson(this.entity);
			this.inDarkMode = this.doc.querySelector('.top-region-body-text') !== null;
		}
	}

	parseJson(data: any): IRelatedLinks {
		return {
			icon: this.util.extract(data, 'Icon'),
			title: this.util.extract(data, 'Title'),
			linkTargets: this.util.extract(data, 'LinkTargets').map(link => this.linkService.parseLink(link)),
			image: this.resolveImage(this.util.extract(data, 'Image')),
			readMoreTitle: this.util.extract(data, 'ReadMoreLinkTitle'),
			readMoreLink: this.util.extract(data, 'ReadMoreLinkDestination')
		};
	}

	resolveImage(image: any): IRelatedLinkImage {
		return {
			mediaUrl: this.util.extract(image, 'Url'),
			mimeType: this.util.extract(image, 'MimeType')
		};
	}
}