import { HighlightedContentData } from 'src/app/core/interfaces/interfaces.component';
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 { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { ConstantsService } from 'src/app/shared/constants/constants.service';

@Injectable()
export class HighlightedContentService {
	videoPlayPauseText: 'PLAY' | 'PAUSE' = 'PLAY';
	videoIcon: 'fas fa-play' | 'fas fa-pause' = 'fas fa-play';

	constructor(
		private util: UtilService,
		private linkService: ComponentLinkService,
		private constant: ConstantsService,
		@Inject(DOCUMENT) private document
	) { }

	readonly positionMap = {
		'HighlightedContentRightImageMain': 'right',
		'HighlightedContentLeftImageMain': 'left',
		'HighlightedContentRightImageFiftyFiftyMain': 'rightImageFiftyFifty',
		'HighlightedContentLeftImageFiftyFiftyMain': 'leftImageFiftyFifty'
	};

	/**
	 * Parses a Json-object and returns a typed object
	 *
	 * @param {*} entity The Json to parse
	 * @returns {HighlightedContentData}
	 * @memberof HighlightedContentService
	 */
	parseJson(entity: any): HighlightedContentData {
		const viewName = this.util.extract(entity, 'MvcData', 'ViewName');
		const displayLinkAs = this.util.extract(entity, 'DisplayLinkAs');
		const videojson = this.util.extract(entity, 'Video');
		const link = displayLinkAs === 'No link' ? undefined : this.util.extract(entity, 'LinkTarget');
		const mediaType = this.resolveMediaType(entity);

		return {
			title: this.util.extract(entity, 'Title'),
			subtitle: this.util.extract(entity, 'Subtitle'),
			deck: this.util.extract(entity, 'Deck'),
			descriptionTitle: this.util.extract(entity, 'DecriptionTitle'),
			description: this.util.extract(entity, 'Description'),
			rightImage: (this.positionMap[viewName] === 'right' || this.positionMap[viewName] === 'rightImageFiftyFifty'),
			fiftyFiftyTemplate: (this.positionMap[viewName] === 'leftImageFiftyFifty' || this.positionMap[viewName] === 'rightImageFiftyFifty'),
			isButtonLink: displayLinkAs === 'Button',
			link: this.linkService.parseLink(link),
			videojson: videojson,
			colorScheme: this.resolveColorScheme(entity),
			mediaType: mediaType,
			imgURL: this.util.extract(entity, 'Image', 'Url'),
			mimeType: this.resolveMimeType(entity, mediaType),
			imgAlt: this.util.extract(entity, 'Video', 'Assetmetadata', 'Cmsdescription') || '',
			// Card id is set here since the json structure is modified in the integration layer
			// and all four ids needs to be added to make sure that the shortcut links work regardless of which card component is linked to
			id: `${this.constant.COMPONENT_ID_PREFIX}-${this.util.extract(entity, 'Id')}`,
		} as HighlightedContentData;
	}

	private resolveColorScheme(jsonData): string {
		const color = this.util.extract(jsonData, 'BackgroundForDescriptionBox');

		switch (color) {
			case 'Light green': return 'bg-light-green text-cool-grey';
			case 'Cool grey': return 'bg-cool-grey';
			case 'Brown': return 'bg-brown';
			case 'Beige': return 'bg-beige text-cool-grey';
			case 'Light slate': return 'bg-light-slate text-cool-grey';
			default: return 'bg-cool-grey';
		}
	}

	private resolveMimeType(jsondata: any, type: string): string {
		type = type.charAt(0).toUpperCase() + type.slice(1).toLowerCase();
		return this.util.extract(jsondata, type, 'MimeType');
	}

	private resolveMediaType(jsonData): string {
		// Video take priority over image in the case where both are added
		const hasVideo = !!this.util.extract(jsonData, 'Video');
		const hasImage = !!this.util.extract(jsonData, 'Image');
		if (hasVideo) {
			return 'video';
		}
		else if (hasImage) {
			return 'image';
		} else {
			return 'missing';
		}
	}

}