import { Component, OnInit, ChangeDetectionStrategy, Input, Inject, HostBinding } from '@angular/core';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { DOCUMENT } from '@angular/common';
import { ComponentLinkService } from 'src/app/core/services/component-link-service/component-link.service';
import { ComponentLink } from 'src/app/core/interfaces/interfaces.component';

type mediaType = 'image' | 'video' | 'missing';

interface ISliderMain {
	title: string;
	items: ISliderItem[];
}

interface ISliderItem {
	mediaType: mediaType;
	mediaUrl: string;
	mimeType: string;
	mediaAlt: string;
	link: ComponentLink;
}

@Component({
	selector: 'div[slider-main]',
	templateUrl: './slider-main.component.html',
	styleUrls: ['./slider-main.component.scss'],
	changeDetection: ChangeDetectionStrategy.OnPush
})
export class SliderMainComponent implements OnInit {

	@Input() entity;

	public data: ISliderMain;

	@HostBinding('class') get class() { return 'space-between--slider bg-off-white'; }

	constructor(
		private util: UtilService,
		private linkService: ComponentLinkService,
		@Inject(DOCUMENT) private doc: Document
	) { }

	ngOnInit() {
		this.setup();
	}

	setup(): void {
		if (this.entity) {
			this.data = this.parseJson(this.entity);
			this.data.items = this.data.items.filter(item => item.mediaType === 'image');
		}
	}

	private parseJson(data: any): ISliderMain {
		const parsed: ISliderMain = {
			title: this.util.extract(data, 'Title'),
			items: (this.util.extract(data, 'SliderItems') || []).map(slider => this.resolveSliderItems(slider))
		};

		return parsed;
	}

	private resolveSliderItems(sliderItem: any): ISliderItem {
		return {
			mediaType: this.resolveMediaType(sliderItem),
			mediaUrl: this.util.extract(sliderItem, 'ImageVideo', 'Url'),
			mimeType: this.util.extract(sliderItem, 'ImageVideo', 'MimeType'),
			mediaAlt: this.util.extract(sliderItem, 'ImageVideo', 'Assetmetadata', 'Cmsdescription') || '',
			link: this.linkService.parseLink(this.util.extract(sliderItem, 'LinkTarget'))
		};
	}

	private resolveMediaType(jsonData: any): mediaType {
		const mimeType = this.util.extract(jsonData, 'ImageVideo', 'MimeType') || '';

		switch (mimeType.split('/')[0]) {
			case 'video': return 'video';
			case 'image': return 'image';
			default: return 'missing';
		}
	}
}