import { Component, OnInit, Input, HostBinding } from '@angular/core';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { LabelService } from 'src/app/core/services/label-service/label-service.service';
import { ComponentLinkService } from 'src/app/core/services/component-link-service/component-link.service';
import { KeycloakService } from 'keycloak-angular';

interface Tool {
	imageUrl: string;
	altText: string;
	toolUrl: any;
	toolFile: string;
	buttonTitle: string;
	description: string;
	industries: any;
	services: any;
	products: any;
	devices: any;
	languages: any;
	icons: Icon[];
	presentingTool: string;
	toolFileName: string;
}

interface Icon {
	name: string;
	type: iconType;
	url: string;
}

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

@Component({
	selector: 'div[tool-main]',
	templateUrl: './tool-main.component.html',
	styleUrls: ['./tool-main.component.scss']
})
export class ToolMainComponent implements OnInit {

	@Input() entity;
	isLoggedIn: any;
	userRoles: String[] = [];

	data: Tool;
	loginRequired: boolean;
	buttonDisabled: boolean;

	// Labels
	industriesLabel: string;
	productPlatformLabel: string;
	servicesLabel: string;
	devicesLabel: string;
	languagesLabel: string;
	toolButtonLabel: string;
	buttonTitle: string;
	autoButtonLabel: string;
	downloadToolLabel: string;
	urlOrDownloadObj: any;
	isDownload: boolean;
	toolLabel: string;

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

	@HostBinding('class') get class() { return 'space-between--slider-no-bottom'; }

	constructor(
		private util: UtilService,
		private labelService: LabelService,
		private keycloakService: KeycloakService,
		private linkService: ComponentLinkService
	) { }

	ngOnInit() {
		this.keycloakService.isLoggedIn().then(res => {
			this.isLoggedIn = res;
			if (this.isLoggedIn) {
				this.keycloakService.getUserRoles(true).map(role => this.userRoles.push(this.parseRole(role.toString())));
			}
			this.isLoginRequired(this.entity, this.util.extract(this.entity, 'OpenOrRestrictedTool'));
			setTimeout(() => {
				this.data = this.parseJson(this.entity);
				this.isDownload = (this.data.presentingTool.toLowerCase() === 'download tool') ? true :  false;
				if (this.isDownload) {
					this.urlOrDownloadObj =  this.data.toolFile;
					this.urlOrDownloadObj['toolFileName'] = this.data.toolFileName;
				} else {
					this.urlOrDownloadObj = this.data.toolUrl;
				}
				this.toolLabel = (this.isDownload) ? this.downloadToolLabel : this.toolButtonLabel;
			}, 100);
		});
		this.labelService.getLabel('industries').then(x => this.industriesLabel = x);
		this.labelService.getLabel('productPlatform').then(x => this.productPlatformLabel = x);
		this.labelService.getLabel('services').then(x => this.servicesLabel = x);
		this.labelService.getLabel('devices').then(x => this.devicesLabel = x);
		this.labelService.getLabel('languages').then(x => this.languagesLabel = x);
		this.labelService.getLabel('autoButtonTitle').then(x => this.autoButtonLabel = x);
	}

	parseJson(json: any): Tool {
		return {
			imageUrl: this.util.extract(json, 'Image', 'Url'),
			altText: this.util.extract('Image', 'Assetmetadata', 'Titlemm'),
			industries: this.util.extract(json, 'Industries') || [],
			services: this.util.extract(json, 'Services') || [],
			products: this.util.extract(json, 'ProductsPlatform') || [],
			devices: this.util.extract(json, 'Devices') || [],
			languages: this.util.extract(json, 'Language') || [],
			icons: (this.util.extract(json, 'SocialMedia') || []).map(e => this.parseIcon(e)),
			buttonTitle: this.buttonTitle,
			description: this.util.extract(json, 'Description'),
			toolUrl: this.util.extract(json, 'UrlToTool'),
			toolFile: this.util.extract(json, 'ToolFile'),
			presentingTool: this.util.extract(json, 'PresentingTool'),
			toolFileName: this.util.extract(json, 'ToolFileName')
		};
	}

	parseIcon(json): Icon {
		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,
			url: url
		};
	}

	parseRole(role: string): String {
		if (role.includes('[')) {
			role = role.slice(0, role.indexOf('['));
		}
		return role.trim();
	}

	isLoginRequired(json: any, openOrRestricted: string) {
		this.loginRequired = false;
		this.buttonDisabled = false; 
		this.labelService.getLabel('openTool').then(x => this.toolButtonLabel = x);
		this.labelService.getLabel('downloadTool').then(x => this.downloadToolLabel = x);
		this.buttonTitle = this.util.extract(json, 'ButtonTitle');
		if ((openOrRestricted.startsWith('Login') || openOrRestricted.startsWith('Role')) && !this.isLoggedIn) {
			this.loginRequired = true;
			this.labelService.getLabel('loginRequired').then(x => this.toolButtonLabel = x);
			this.labelService.getLabel('loginPrompt').then(x => this.buttonTitle = x);
		} else if (openOrRestricted.startsWith('Role')) {
			const requiredRoles = this.util.extract(json, 'Roles') || [];
			this.labelService.getLabel('roleBased').then(x => this.toolButtonLabel = x);
			this.buttonDisabled = true;
			requiredRoles.forEach(requiredRole => {
				if (this.userRoles.includes(requiredRole)) {
					this.labelService.getLabel('openTool').then(x => this.toolButtonLabel = x);
					this.labelService.getLabel('downloadTool').then(x => this.downloadToolLabel = x);
					this.buttonDisabled = false;
				}
			});
		}
	}
}