import { Component, OnInit, Input, 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';

interface SocialMediaFooter {
	title: string;
	icons: SocialMediaIcon[];
}

interface SocialMediaIcon {
	name: string;
	type: iconType;
	link: any;
	url: string;
}

type iconType = 'icon' | 'apple-app-store' | 'google-play';

@Component({
	selector: 'div[social-media-footer-side]',
	templateUrl: './social-media-footer-side.component.html',
	styleUrls: ['./social-media-footer-side.component.scss']
})
export class SocialMediaFooterSideComponent implements OnInit {

	@Input() entity;

	data: SocialMediaFooter;

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


	readonly appStoreIconName = 'icon-app-store-apple';
	readonly googlePlayIconName = 'icon-app-store-google';


	ngOnInit() {
		this.data = this.parseJson(this.entity);
	}

	parseJson(json: any): SocialMediaFooter {
		const title: string = this.util.extract(json, 'Title');
		const socialMediaIcons: SocialMediaIcon[] = (this.util.extract(json, 'SocialMedia') || []).map(e => this.parseSocialMediaIcon(e));
		return {
			title: title,
			icons: socialMediaIcons
		};
	}

	parseSocialMediaIcon(json): SocialMediaIcon {
		const iconName = this.util.extract(json, 'Icon');
		const link = this.util.extract(json, 'Link');
		const url = this.linkService.getUrl(link)
		let type: iconType  = 'icon';
		if (this.appStoreIconName === iconName) {
			type = 'apple-app-store';
		} else if (this.googlePlayIconName === iconName) {
			type = 'google-play';
		}

		return {
			name: iconName,
			type: type,
			link: link,
			url: url
		};
	}

}