import { TopBannerData, HighLightedBox } from 'src/app/core/interfaces/interfaces.component';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { ConstantsService } from 'src/app/shared/constants/constants.service';
import { Injectable, Inject } from '@angular/core';
import { ComponentLinkService } from 'src/app/core/services/component-link-service/component-link.service';
import { DOCUMENT } from '@angular/common';

type imageType = 'title' | 'alt';

@Injectable()
export class TopBannerService {

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

	/**
	 * Parses a Json-object and returns a typed object
	 *
	 * @param {*} entity The Json to parse
	 * @returns {TopBannerData}
	 * @memberof TopBannerService
	 */
	parseJson(entity: any): TopBannerData {
		let boxes = this.util.extract(entity, 'HighlightedContentBoxModel') || [];

		if (boxes.length > 3) {
			boxes = boxes.slice(0, 3);
		}

		const currentWidth = window.innerWidth || this.document.documentElement.clientWidth;

		const parsed: TopBannerData = {
			introduction: this.util.extract(entity, 'Introduction'),
			bannerImageUrl: encodeURI(this.util.extract(entity, 'BannerImage', 'Url') || ''),
			imageAlt: this.getImageMetaData('alt', currentWidth, entity),
			imageTitle: this.getImageMetaData('title', currentWidth, entity),
			box1: this.getBox(0, entity),
			box2: this.getBox(1, entity),
			box3: this.getBox(2, entity),
			mobileBannerImageUrl: encodeURI(this.util.extract(entity, 'MobileBannerImage', 'Url') || ''),
			includeBreadcrumb: this.util.extract(entity, 'includeBreadcrumb'),
			viewName: this.util.extract(entity, 'MvcData', 'ViewName')
		};

		return parsed;
	}

	/**
	 * Gets metadata for images based on the browser window being
	 * in desktop or mobile view/breakpoint
	 *
	 * @param {imageType} metaType The type of metadata to get
	 * @param {number} windowWidth The width of the current window
	 * @param {*} entity The Json to parse
	 * @returns {string}
	 * @memberof TopBannerService
	 */
	getImageMetaData(metaType: imageType, windowWidth: number, entity: any): string {
		const inDesktopView = this.inDesktopView(windowWidth);
		const imageToUse = inDesktopView ? 'BannerImage' : 'MobileBannerImage';

		return this.util.extract(
			entity,
			imageToUse,
			'Assetmetadata',
			metaType === 'title' ? 'Titlemm' : 'Cmsdescription'
		) as string;
	}

	/**
	 * Gets the Highlighted Content boxes
	 *
	 * @private
	 * @param {number} index The index for the list of boxes
	 * @param {*} entity The Json to parse
	 * @returns {HighLightedBox}
	 * @memberof TopBannerService
	 */
	private getBox(index: number, entity: any): HighLightedBox {
		const boxes = this.util.extract(entity, 'HighlightedContentBoxModel') || [];
		const linkObject = this.util.extract(boxes[index], 'LinkTarget');

		if (boxes.length > index) {
			return {
				description: this.util.extract(boxes[index], 'Description') || '',
				link: this.linkService.parseLink(linkObject)
			};
		}
	}

	/**
	 * Returns whether we are in desktop view or not
	 *
	 * @param {number} width The width of the window
	 * @returns {boolean}
	 * @memberof TopBannerService
	 */
	private inDesktopView(width: number): boolean {
		return width > this.constants.BOOTSTRAP_BREAKPOINTS.MD;
	}

}