import { Component, OnInit, AfterViewInit, Input, Inject } from '@angular/core';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { ConstantsService } from 'src/app/shared/constants/constants.service';
import { DOCUMENT } from '@angular/common';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ResizeContentService } from 'src/app/core/services/resize-service/resize-content.service';

declare var akamai: any;

@Component({
	selector: 'akamai-media-player',
	templateUrl: './akamai-media-player.component.html',
	styleUrls: ['./akamai-media-player.component.scss']
})
export class AkamaiMediaPlayerComponent implements OnInit, AfterViewInit {
	@Input() akamaiMedia;
	@Input() title;
	@Input() description;
	@Input() ampId;
	@Input() titleOnly: boolean;
	componentId: string;
	akamaiMovieMP4Url: string;
	akamaiMovieF4mUrl: string;
	akamaiMovieAsset: string;
	akamaiMovieMp4LowPrev: string;
	akamaiMovieMp4HighPrev: string;
	akamaiMovieMp4MediumPrev: string;
	createEvent: boolean;
	desktopView: boolean;
	poster: string;
	config: any;
	amp: any;

	constructor(
		private idGenerator: IdGeneratorService,
		private constants: ConstantsService,
		private util: UtilService,
		private modalService: NgbModal,
		private resizeService: ResizeContentService,
		@Inject(DOCUMENT) private doc) {
	}

	ngOnInit(): void {
		const width = (window.innerWidth || this.doc.documentElement.clientWidth);
		this.desktopView = this.inDesktopView(width);

		this.componentId = this.akamaiMedia.Id + '-' + this.idGenerator.getId();
		this.akamaiMovieMP4Url = this.akamaiMedia.Mp4StreamingUrl;
		this.akamaiMovieF4mUrl = this.akamaiMedia.F4mStreamingUrl;
		this.akamaiMovieAsset = this.akamaiMedia.Asset;
		this.akamaiMovieMp4LowPrev = this.akamaiMedia.Mp4LowPreview;
		this.akamaiMovieMp4HighPrev = this.akamaiMedia.Mp4HighPreview;
		this.akamaiMovieMp4MediumPrev = this.akamaiMedia.Mp4MediumPreview;
		this.poster = 'v2/assets/img/default-amp-preview.png';

		this.resizeService.registerCallback(this.componentId, () => {
			const currentWidth = window.innerWidth || document.documentElement.clientWidth;
			this.desktopView = this.inDesktopView(currentWidth);
		});
	}

	ngAfterViewInit() {
		this.config = {
			paths: {
				base: '../',
				root: '../',
				player: 'v2/assets/amp/',
				plugins: 'v2/assets/akamai/amp/',
				resources: '../resources/'
			},
			media: {
				autoplay: (this.desktopView || this.titleOnly),
				poster: this.poster,
				source: [{
					src: this.akamaiMovieMp4HighPrev,
					type: 'video/mp4',
				}, {
					src: this.akamaiMovieMp4MediumPrev,
					type: 'video/mp4',
				}, {
					src: this.akamaiMovieMp4LowPrev,
					type: 'video/mp4',
				}, {
					src: this.akamaiMovieMP4Url,
					type: 'application/x-mpegURL',
				}]
			}
		};
		if (!this.desktopView && !this.titleOnly) {
			this.util.loadScript('v2/assets/amp/amp.min.js').then(() => {
				const amp = akamai.amp.AMP.create('amp-' + this.componentId, this.config, () => {
					// Go directly to full screen on mobile devices.
					amp.addEventListener('play', () => { amp.enterFullScreen(); });
				});
			});
		}
	}

	public loadModalVideo(): void {
		this.createEvent = true;
		this.util.loadScript('v2/assets/amp/amp.min.js').then(() => {
			const amp = akamai.amp.AMP.create('amp-modal-' + this.componentId, this.config, () => {
				// Go directly to full screen on mobile devices.
				if (!this.desktopView) {
					amp.enterFullScreen();
					setTimeout(() => {
						amp.play();
					}, 100);
				}
			});
		});

	}

	/** Destroy media player on modal close. */
	public closeModal(): void {
		if (this.createEvent) {
			this.createEvent = false;
		}
		else if (this.amp && this.amp != null) {
			this.amp.end();
			this.amp.setMedia({});
			this.amp.destroy();
			this.amp = null;
		}
	}

	private inDesktopView(width: number): boolean {
		return width > this.constants.BOOTSTRAP_BREAKPOINTS.MD;
	}

	/** Open modal and start video. */
	public openModal(content): void {
		const modal = this.modalService.open(content, { size: 'lg', centered: true });

		// Wait for modal to be created before initializing video.
		setTimeout(() => {
			this.loadModalVideo();
		}, 100);

		// Close modal on click outside.
		modal.result.then(
			(close) => { this.closeModal(); },
			(outsideClick) => { this.closeModal(); }
		);
	}
}