/** @file
 * @author Edouard DUPIN
 * @copyright 2018, Edouard DUPIN, all right reserved
 * @license PROPRIETARY (see license file)
 */

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { interval } from 'rxjs';
import { fadeInAnimation } from '../../_animations/index';
import { HttpWrapperService } from '../../service/http-wrapper';
import { VideoService } from '../../service/video';
import { SeriesService } from '../../service/series';
import { SeasonService } from '../../service/season';
import { ArianeService } from '../../service/ariane';

@Component({
	selector: 'app-video',
	templateUrl: './video.html',
	styleUrls: ['./video.less'],
	animations: [fadeInAnimation],
	host: { '[@fadeInAnimation]': '' }
})

export class VideoScene implements OnInit {
	videoGlobal:any;
	@ViewChild('globalVideoElement')
	  set mainDivEl(el: ElementRef) {
		if (el != null) {
		    this.videoGlobal = el.nativeElement;
		}
	 }
	videoPlayer: HTMLVideoElement;
	@ViewChild('videoPlayer')
	  set mainVideoEl(el: ElementRef) {
		if (el != null) {
		    this.videoPlayer = el.nativeElement;
		}
	 }
	videoCanva: any;
	@ViewChild('canvascreenshoot')
	  set mainCanvaEl(el: ElementRef) {
		if (el != null) {
		    this.videoCanva = el.nativeElement;
		}
	 }
	
	id_video:number = -1;

	mediaIsNotFound:boolean = false;
	mediaIsLoading:boolean = true;
	error:string = "";
	
	name:string = "";
	description:string = "";
	episode:number = undefined;
	series_id:number = undefined;
	series_name:string = undefined;
	season_id:number = undefined;
	season_name:string = undefined;
	data_id:number = -1;
	time:number = undefined;
	type_id:number = undefined;
	generated_name:string = "";
	video_source:string = "";
	cover:string = null;
	covers:Array<string> = [];
	
	playVideo:boolean = false;
	displayVolumeMenu:boolean = false;
	isPlaying:boolean = false;
	isFullScreen:boolean = false;
	currentTime:number = 0;
	currentTimeDisplay:string = "00";
	duration:number = 0;
	durationDisplay:string = "00";
	volumeValue:number = 100;
	

	displayNeedHide:boolean = false;
	timeLeft: number = 10;
	interval = null;
	startHideTimer() {
		this.displayNeedHide = false;
		this.timeLeft = 5;
		if (this.interval != null) {
			return;
		}
		let self = this;
		this.interval = setInterval(() => {
			console.log("periodic event: " + self.timeLeft);
			if(self.timeLeft > 0) {
				self.timeLeft--;
			} else {
				clearInterval(self.interval);
				self.timeOutDetected();
			}
		},1000)
	}
	timeOutDetected() {
		console.log(" ==> stop timer");
		this.displayNeedHide = true;
		clearInterval(this.interval);
		this.interval = null;
	}
	
	
	constructor(private route: ActivatedRoute,
	            private router: Router,
	            private locate: Location,
	            private videoService: VideoService,
	            private seriesService: SeriesService,
	            private seasonService: SeasonService,
	            private httpService: HttpWrapperService,
	            private arianeService: ArianeService) {
		
	}
	
	generateName() {
		this.generated_name = "";
		if (this.series_name != undefined) {
			this.generated_name += this.series_name + "-";
		}
		if (this.season_name != undefined) {
			if (this.season_name.length < 2) {
				this.generated_name += "s0" + this.season_name + "-";
			} else {
				this.generated_name += "s" + this.season_name + "-";
			}
		}
		if (this.episode != undefined) {
			if (this.episode < 10) {
				this.generated_name += "e0" + this.episode + "-";
			} else {
				this.generated_name += "e" + this.episode + "-";
			}
		}
		this.generated_name += this.name;
		this.generated_name = this.generated_name.replace(new RegExp("&", "g"), "_");
		this.generated_name = this.generated_name.replace(new RegExp("/", "g"), "_");
	}
	
	myPeriodicCheckFunction() {
		console.log("check ... ");
	}
	changeMetadata() {
		console.log("list of the stream:");
		/*
		let captureStream = this.videoPlayer.audioTracks;
		for (let iii=0; iii < captureStream.length; iii++) {
	    	console.log("  - " + captureStream[iii].language);
		    if (captureStream[iii].language.substring(0,2) === "fr") {
		    	captureStream[iii].enabled = true;
		    } else {
		    	captureStream[iii].enabled = false;
		    }
		}
		*/
	}
	audioTracks(event) {
		console.log("list of the stream:" + event);
		/*
		let captureStream = this.videoPlayer.audioTracks;
		for (let iii=0; iii < captureStream.length; iii++) {
	    	console.log("  - " + captureStream[iii].language);
		    if (captureStream[iii].language.substring(0,2) === "fr") {
		    	captureStream[iii].enabled = true;
		    } else {
		    	captureStream[iii].enabled = false;
		    }
		}
		*/
	}
	
	ngOnInit() {
		this.startHideTimer();
		this.arianeService.updateManual(this.route.snapshot.paramMap);
		
		this.id_video = this.arianeService.getVideoId();
		let self = this;
		this.videoService.get(this.id_video)
			.then(function(response) {
				console.log("get response of video : " + JSON.stringify(response, null, 2));
				self.error = "";
				self.name = response.name;
				self.description = response.description;
				self.episode = response.episode;
				self.series_id = response.series_id;
				self.season_id = response.season_id;
				self.data_id = response.data_id;
				self.time = response.time;
				self.generated_name = response.generated_name;
				if (self.data_id != -1) {
					self.video_source = self.httpService.createRESTCall("data/" + self.data_id);
				} else {
					self.video_source = "";
				}
				if (response.covers == undefined || response.covers == null || response.covers.length == 0) {
					self.cover = null;
				} else {
					self.cover = self.videoService.getCoverUrl(response.covers[0]);
					for (let iii=0; iii<response.covers.length; iii++) {
						self.covers.push(self.videoService.getCoverUrl(response.covers[iii]));
					}
				}
				self.generateName();
				if (self.series_id !== undefined && self.series_id !== null) {
					self.seriesService.get(self.series_id)
						.then(function(response) {
							self.series_name = response.name;
							self.generateName();
						}).catch(function(response) {
							// nothing to do ...
						});
				}
				if (self.season_id !== undefined && self.season_id !== null) {
					self.seasonService.get(self.season_id)
						.then(function(response) {
							self.season_name = response.name;
							self.generateName();
						}).catch(function(response) {
							// nothing to do ...
						});
				}
				self.mediaIsLoading = false;
				//console.log("display source " + self.video_source);
				//console.log("set transformed : " + JSON.stringify(self, null, 2));
			}).catch(function(response) {
				self.error = "Can not get the data";
				self.name = "";
				self.description = "";
				self.episode = undefined;
				self.series_id = undefined;
				self.season_id = undefined;
				self.data_id = -1;
				self.time = undefined;
				self.generated_name = "";
				self.video_source = "";
				self.cover = null;
				self.series_name = undefined;
				self.season_name = undefined;
				self.mediaIsNotFound = true;
				self.mediaIsLoading = false;
			});
	}
	onRequirePlay() {
		this.startHideTimer();
		this.playVideo = true;
		this.displayVolumeMenu = false;
	}
	onRequireStop() {
		this.startHideTimer();
		this.playVideo = false;
		this.displayVolumeMenu = false;
	}
	onVideoEnded() {
		this.startHideTimer();
		this.playVideo = false;
		this.displayVolumeMenu = false;
	}
	
	//https://www.w3schools.com/tags/ref_av_dom.asp

	changeStateToPlay() {
		this.isPlaying = true;
	}
	changeStateToPause() {
		this.isPlaying = false;
	}
	
	convertIndisplayTime(time:number) : string {
		let tmpp = parseInt("" + time);
		let heures = parseInt("" + (tmpp/3600));
		tmpp = tmpp - heures * 3600;
		let minutes = parseInt("" + (tmpp/60));
		let seconds = tmpp - minutes * 60;
		let out = "";
		if (heures != 0) {
			out += heures + ":";
		}
		if (minutes >= 10) {
			out += minutes + ":";
		} else {
			out += "0" + minutes + ":";
		}
		if (seconds >= 10) {
			out += seconds;
		} else {
			out += "0" + seconds;
		}
		return out;
	}
	
	changeTimeupdate(currentTime:any) {
		//console.log("time change ");
		//console.log("    ==> " + this.videoPlayer.currentTime);
		this.currentTime = this.videoPlayer.currentTime;
		this.currentTimeDisplay = this.convertIndisplayTime(this.currentTime);
		//console.log("    ==> " + this.currentTimeDisplay);
	}
	changeDurationchange(duration:any) {
		console.log("duration change ");
		console.log("    ==> " + this.videoPlayer.duration);
		this.duration = this.videoPlayer.duration;
		this.durationDisplay = this.convertIndisplayTime(this.duration);
	}
	
	onPlay() {
		console.log("play");
		this.startHideTimer();
		if (this.videoPlayer === null
			 || this.videoPlayer === undefined) {
			console.log("error element: " + this.videoPlayer);
			return;
		}
		this.videoPlayer.volume = this.volumeValue/100;
		this.videoPlayer.play();
	}
	
	onPause() {
		console.log("pause");
		this.startHideTimer();
		if (this.videoPlayer === null
			 || this.videoPlayer === undefined) {
			console.log("error element: " + this.videoPlayer);
			return;
		}
	}
	onPauseToggle() {
		console.log("pause toggle");
		this.startHideTimer();
		if (this.videoPlayer === null
			 || this.videoPlayer === undefined) {
			console.log("error element: " + this.videoPlayer);
			return;
		}
		if (this.isPlaying == true) {
			this.videoPlayer.pause();
		} else {
			this.videoPlayer.play();
		}
	}
	
	onStop() {
		console.log("stop");
		this.startHideTimer();
		if (this.videoPlayer === null
			 || this.videoPlayer === undefined) {
			console.log("error element: " + this.videoPlayer);
			return;
		}
		this.videoPlayer.pause();
		this.videoPlayer.currentTime = 0;
		
	}
	
	onBefore() {
		console.log("before");
		this.startHideTimer();
	}
	
	onNext() {
		console.log("next");
		this.startHideTimer();
	}
	
	seek(newValue:any) {
		console.log("seek " + newValue.value);
		this.startHideTimer();
		if (this.videoPlayer === null
			 || this.videoPlayer === undefined) {
			console.log("error element: " + this.videoPlayer);
			return;
		}
		this.videoPlayer.currentTime = newValue.value;
	}
	
	onRewind() {
		console.log("rewind");
		this.startHideTimer();
		if (this.videoPlayer === null
			 || this.videoPlayer === undefined) {
			console.log("error element: " + this.videoPlayer);
			return;
		}
		this.videoPlayer.currentTime = this.currentTime - 10;
	}
	
	onForward() {
		console.log("forward");
		this.startHideTimer();
		if (this.videoPlayer === null
			 || this.videoPlayer === undefined) {
			console.log("error element: " + this.videoPlayer);
			return;
		}
		this.videoPlayer.currentTime = this.currentTime + 10;
	}
	
	onMore() {
		console.log("more");
		this.startHideTimer();
		if (this.videoPlayer === null
			 || this.videoPlayer === undefined) {
			console.log("error element: " + this.videoPlayer);
			return;
		}
	}
	onFullscreen() {
		console.log("fullscreen");
		this.startHideTimer();
		if (this.videoGlobal === null
			 || this.videoGlobal === undefined) {
			console.log("error element: " + this.videoGlobal);
			return;
		}
		if (this.videoGlobal.requestFullscreen) {
			this.videoGlobal.requestFullscreen();
		} else if (this.videoGlobal.mozRequestFullScreen) {
			this.videoGlobal.mozRequestFullScreen();
		} else if (this.videoGlobal.webkitRequestFullscreen) {
			this.videoGlobal.webkitRequestFullscreen();
		} else if (this.videoGlobal.msRequestFullscreen) {
			this.videoGlobal.msRequestFullscreen();
		}
	}
	
	onFullscreenExit() {
		this.onFullscreenExit22(document);
	}
	onFullscreenExit22(docc:any) {
		console.log("fullscreen EXIT");
		this.startHideTimer();
		if (this.videoGlobal === null
			 || this.videoGlobal === undefined) {
			console.log("error element: " + this.videoGlobal);
			return;
		}
		if (docc.exitFullscreen) {
			docc.exitFullscreen();
		} else if (docc.mozCancelFullScreen) {
			docc.mozCancelFullScreen();
		} else if (docc.webkitExitFullscreen) {
			docc.webkitExitFullscreen();
		} else if (docc.msExitFullscreen) {
			docc.msExitFullscreen();
		}
	}
	
	onFullscreenChange() {
		this.onFullscreenChange22(document);
	}
	onFullscreenChange22(element:any) {
		var isInFullScreen = (element.fullscreenElement && element.fullscreenElement !== null) ||
		        (element.webkitFullscreenElement && element.webkitFullscreenElement !== null) ||
		        (element.mozFullScreenElement && element.mozFullScreenElement !== null) ||
		        (element.msFullscreenElement && element.msFullscreenElement !== null);
		console.log("onFullscreenChange(" + isInFullScreen + ")");
		this.isFullScreen = isInFullScreen;
	}
	
	onVolumeMenu() {
		this.displayVolumeMenu = !this.displayVolumeMenu;
		this.startHideTimer();
	}
	
	onVolume(newValue:any) {
		console.log("onVolume " + newValue.value);
		this.startHideTimer();
		if (this.videoPlayer === null
			 || this.videoPlayer === undefined) {
			console.log("error element: " + this.videoPlayer);
			return;
		}
		this.volumeValue = newValue.value;
		this.videoPlayer.volume = this.volumeValue/100;
		this.videoPlayer.muted=false;
	}
	
	onVolumeMute() {
		this.startHideTimer();
		if (this.videoPlayer === null
			 || this.videoPlayer === undefined) {
			console.log("error element: " + this.videoPlayer);
			return;
		}
		this.videoPlayer.muted=true;
	}
	
	onVolumeUnMute() {
		this.startHideTimer();
		if (this.videoPlayer === null
				 || this.videoPlayer === undefined) {
				console.log("error element: " + this.videoPlayer);
				return;
			}
		this.videoPlayer.muted=false;
	}

	onTakeScreenShoot() {
		this.startHideTimer();
		//const canvas = document.createElement("canvas");
		// scale the canvas accordingly
		this.videoCanva.width = this.videoPlayer.videoWidth;
		this.videoCanva.height = this.videoPlayer.videoHeight;
		// draw the video at that frame
		this.videoCanva.getContext('2d').drawImage(this.videoPlayer, 0, 0, this.videoCanva.width, this.videoCanva.height);
		//canvas.crossorigin="anonymous"
		// convert it and send it to the server
		let self = this;
		
		this.videoCanva.toBlob(function(blob){
			self.videoService.uploadCoverBlob(blob, this.id_video);
		}, 'image/jpeg', 0.95);
		/*
		let tmpUrl = this.videoCanva.toDataURL('image/jpeg', 0.95);
		fetch(tmpUrl)
		  .then(res => res.blob()) // Gets the response and returns it as a blob
		  .then(blob => {
			  self.videoService.uploadCoverBlob(blob, this.id_video);
		});
		*/
	}
	
}