import { Component, OnInit, Input, ChangeDetectionStrategy, ChangeDetectorRef, HostBinding, OnDestroy, Inject } 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 { LabelService } from 'src/app/core/services/label-service/label-service.service';
import { ComponentLink } from 'src/app/core/interfaces/interfaces.component';
import { ResizeContentService } from 'src/app/core/services/resize-service/resize-content.service';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { ConstantsService } from 'src/app/shared/constants/constants.service';
import { DOCUMENT } from '@angular/common';

interface IRelatedLinks {
	icon: string;
	title: string;
	links: ComponentLink[];
}

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

	@Input() entity;

	data: IRelatedLinks;
	copyrightLabel = '[copyright]';
	componentId: string;
	inDesktop: boolean;

	@HostBinding('class') get class() { return 'bg-blue bd-y-white'; }

	constructor(
		private util: UtilService,
		private linkService: ComponentLinkService,
		private labels: LabelService,
		private changeDetector: ChangeDetectorRef,
		private idGenerator: IdGeneratorService,
		private resizer: ResizeContentService,
		private constants: ConstantsService,
		@Inject(DOCUMENT) private doc
	) { }

	ngOnInit() {
		this.labels.getLabel('copyright').then(label => {
			this.copyrightLabel = label;
			this.changeDetector.detectChanges();
		});

		if (this.entity) {
			this.data = this.parseJson(this.entity);
		}
		this.componentId = this.idGenerator.getId();
		this.resizer.registerCallback(this.componentId, () => this.actOnResize());
		// Run the function manually once to set the inDesktop variable to it's correct value
		this.actOnResize();
	}

	actOnResize() {
		const width = (window.innerWidth || this.doc.documentElement.clientWidth);
		this.inDesktop = width >= this.constants.BOOTSTRAP_BREAKPOINTS.LG;
	}

	ngOnDestroy(): void {
		this.resizer.destroyCallback(this.componentId);
	}

	parseJson(data: any): IRelatedLinks {
		return {
			icon: this.util.extract(data, 'Icon'),
			title: this.util.extract(data, 'Title'),
			links: (this.util.extract(data, 'LinkTargets') || []).map(link => this.linkService.parseLink(link))
		};
	}


}