/** @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 { DataService, TrackService, ArtistService, AlbumService, ArianeService } from 'app/service';
import { HttpWrapperService } from 'common/service';
import { isNullOrUndefined } from 'common/utils';

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

export class TrackScene implements OnInit {
	trackGlobal:any;
	@ViewChild('globalTrackElement')
	  set mainDivEl(el: ElementRef) {
		if(el !== null && el !== undefined) {
		    this.trackGlobal = el.nativeElement;
		}
	}
	trackPlayer: HTMLVideoElement;
	@ViewChild('videoPlayer')
	  set mainTrackEl(el: ElementRef) {
		if(el !== null && el !== undefined) {
		    this.trackPlayer = el.nativeElement;
		}
	}
	videoCanva: any;
	@ViewChild('canvascreenshoot')
	  set mainCanvaEl(el: ElementRef) {
		if(el !== null && el !== undefined) {
		    this.videoCanva = el.nativeElement;
		}
	}
	haveNext = null;
	havePrevious = null;
	idTrack:number = -1;

	mediaIsNotFound:boolean = false;
	mediaIsLoading:boolean = true;
	error:string = '';

	name:string = '';
	description:string = '';
	episode:number = undefined;
	artists:number[] = undefined;
	artistName:string = undefined;
	albumId:number = undefined;
	albumName:string = undefined;
	dataId:number = -1;
	time:number = undefined;
	typeId:number = undefined;
	generatedName:string = '';
	trackSource:string = '';
	covers: string[];

	playTrack: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;
	constructor(private trackService: TrackService,
	            private artistService: ArtistService,
	            private albumService: AlbumService,
	            private httpService: HttpWrapperService,
	            private arianeService: ArianeService,
	            private dataService: DataService) {

	}

	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;
	}
	onRequireNext(event: any) {
		console.log(`generate next : ${ this.haveNext.id}`);
		if (event.ctrlKey === false) {
			this.arianeService.navigateTrack({ trackId: this.haveNext.id, newWindows:event.which === 2} );
		} else {
			this.arianeService.navigateTrackEdit({ id: this.haveNext.id, newWindows:event.which === 2} );
		}
		this.arianeService.setTrack(this.haveNext.id);
	}
	onRequirePrevious(event: any) {
		console.log(`generate previous : ${ this.havePrevious.id}`);
		if (event.ctrlKey === false) {
			this.arianeService.navigateTrack({ trackId: this.haveNext.id, newWindows:event.which === 2} );
		} else {
			this.arianeService.navigateTrackEdit({ id: this.haveNext.id, newWindows:event.which === 2} );
		}
		this.arianeService.setTrack(this.havePrevious.id);
	}
	generateName() {
		this.generatedName = '';
		if(this.artistName !== undefined) {
			this.generatedName = `${this.generatedName }${this.artistName }-`;
		}
		if(this.albumName !== undefined) {
			if(this.albumName.length < 2) {
				this.generatedName = `${this.generatedName }s0${ this.albumName }-`;
			} else {
				this.generatedName = `${this.generatedName }s${ this.albumName }-`;
			}
		}
		if(this.episode !== undefined) {
			if(this.episode < 10) {
				this.generatedName = `${this.generatedName }e0${ this.episode }-`;
			} else {
				this.generatedName = `${this.generatedName }e${ this.episode }-`;
			}
		}
		this.generatedName = this.generatedName + this.name;
		this.generatedName = this.generatedName.replace(new RegExp('&', 'g'), '_');
		this.generatedName = this.generatedName.replace(new RegExp('/', 'g'), '_');
		// update the path of the uri request
		this.trackSource = this.httpService.createRESTCall2({
			api: `data/${ this.dataId}/${this.generatedName}`,
			addURLToken: true,
		});
	}

	myPeriodicCheckFunction() {
		console.log('check ... ');
	}
	changeMetadata() {
		console.log('list of the stream:');

		/*
		let captureStream = this.trackPlayer.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.trackPlayer.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() {
		let self = this;
		this.startHideTimer();
		this.idTrack = this.arianeService.getTrackId();
		this.arianeService.trackChange.subscribe((trackId) => {
			console.log(`Detect trackId change...${ trackId}`);
			self.idTrack = trackId;
			self.updateDisplay();
		});
		self.updateDisplay();
	}
	updateDisplay():void {
		let self = this;
		self.haveNext = null;
		self.havePrevious = null;
		this.trackService.get(this.idTrack)
			.then((response) => {
				console.log(`get response of track : ${ JSON.stringify(response, null, 2)}`);
				self.error = '';
				self.name = response.name;
				self.description = response.description;
				self.episode = response.episode;
				self.artists = response.artists;
				self.albumId = response.albumId;
				self.dataId = response.dataId;
				self.time = response.time;
				self.generatedName = "????????? TODO: ???????" //response.generatedName;
				if(self.dataId !== -1) {
					self.trackSource = self.httpService.createRESTCall2({
						api: `data/${ self.dataId}/${self.generatedName}`,
						addURLToken: true,
					});
				} else {
					self.trackSource = '';
				}
				self.covers = self.dataService.getCoverListUrl(response.covers);

				self.generateName();
				if(!isNullOrUndefined(self.artists) && self.artists.length !== 0) {
					self.artistService.get(self.artists[0])
						.then((response2) => {
							self.artistName = response2.name;
							self.generateName();
						}).catch((response3) => {
							// nothing to do ...
						});
				}
				if(!isNullOrUndefined(self.albumId)) {
					self.albumService.get(self.albumId)
						.then((response4) => {
							self.albumName = response4.name;
							self.generateName();
						}).catch((response5) => {
							// nothing to do ...
						});
					self.albumService.getTrack(self.albumId)
						.then((response6:any) => {
							// console.log("saison property: " + JSON.stringify(response, null, 2));
							self.haveNext = null;
							self.havePrevious = null;
							for(let iii = 0; iii < response6.length; iii++) {
								if(isNullOrUndefined(response6[iii].episode)) {
									continue;
								}
								if(response6[iii].episode < self.episode) {
									if(self.havePrevious === null) {
										self.havePrevious = response6[iii];
									} else if(self.havePrevious.episode < response6[iii].episode) {
										self.havePrevious = response6[iii];
									}
								} else if(response6[iii].episode > self.episode) {
									if(self.haveNext === null) {
										self.haveNext = response6[iii];
									} else if(self.haveNext.episode > response6[iii].episode) {
										self.haveNext = response6[iii];
									}
								}
								self.covers.push(self.dataService.getCoverUrl(response6[iii]));
							}
						}).catch((response7:any) => {

						});
				}
				self.mediaIsLoading = false;
				// console.log("display source " + self.trackSource);
				// console.log("set transformed : " + JSON.stringify(self, null, 2));
			}).catch((response8) => {
				self.error = 'Can not get the data';
				self.name = '';
				self.description = '';
				self.episode = undefined;
				self.artists = undefined;
				self.albumId = undefined;
				self.dataId = -1;
				self.time = undefined;
				self.generatedName = '';
				self.trackSource = '';
				self.covers = undefined;
				self.artistName = undefined;
				self.albumName = undefined;
				self.mediaIsNotFound = true;
				self.mediaIsLoading = false;
			});
	}
	onRequirePlay() {
		this.startHideTimer();
		this.playTrack = true;
		this.displayVolumeMenu = false;
	}
	onRequireStop() {
		this.startHideTimer();
		this.playTrack = false;
		this.displayVolumeMenu = false;
	}
	onTrackEnded() {
		this.startHideTimer();
		this.playTrack = false;
		this.displayVolumeMenu = false;

		/*
		if(this.isFullScreen === true) {
			this.isFullScreen = false;
		}
		*/
	}

	changeStateToPlay() {
		this.isPlaying = true;
		if(this.isFullScreen === true) {
			this.onFullscreen();
		}
	}
	changeStateToPause() {
		this.isPlaying = false;
	}

	convertIndisplayTime(time:number) : string {
		let tmpp = parseInt(`${ time}`, 10);
		let heures = parseInt(`${ tmpp / 3600}`, 10);
		tmpp = tmpp - heures * 3600;
		let minutes = parseInt(`${ tmpp / 60}`, 10);
		let seconds = tmpp - minutes * 60;
		let out = '';
		if(heures !== 0) {
			out = `${out }${heures }:`;
		}
		if(minutes >= 10) {
			out = `${out }${minutes }:`;
		} else {
			out = `${out }0${ minutes }:`;
		}
		if(seconds >= 10) {
			out = out + seconds;
		} else {
			out = `${out }0${ seconds}`;
		}
		return out;
	}

	changeTimeupdate(currentTime: any) {
		// console.log("time change ");
		// console.log("    ==> " + this.trackPlayer.currentTime);
		this.currentTime = this.trackPlayer.currentTime;
		this.currentTimeDisplay = this.convertIndisplayTime(this.currentTime);
		// console.log("    ==> " + this.currentTimeDisplay);
	}
	changeDurationchange(duration: any) {
		console.log('duration change ');
		console.log(`    ==> ${ this.trackPlayer.duration}`);
		this.duration = this.trackPlayer.duration;
		this.durationDisplay = this.convertIndisplayTime(this.duration);
	}

	onPlay() {
		console.log('play');
		this.startHideTimer();
		if(this.trackPlayer === null ||
			 this.trackPlayer === undefined) {
			console.log(`error element: ${ this.trackPlayer}`);
			return;
		}
		this.trackPlayer.volume = this.volumeValue / 100;
		this.trackPlayer.play();
	}

	onPause() {
		console.log('pause');
		this.startHideTimer();
		if(this.trackPlayer === null ||
			 this.trackPlayer === undefined) {
			console.log(`error element: ${ this.trackPlayer}`);
			return;
		}
		this.trackPlayer.pause();
	}

	onPauseToggle() {
		console.log('pause toggle ...');
		if(this.isPlaying === true) {
			this.onPause();
		} else {
			this.onPlay();
		}
	}

	onStop() {
		console.log('stop');
		this.startHideTimer();
		if(this.trackPlayer === null ||
			 this.trackPlayer === undefined) {
			console.log(`error element: ${ this.trackPlayer}`);
			return;
		}
		this.trackPlayer.pause();
		this.trackPlayer.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.trackPlayer === null ||
			 this.trackPlayer === undefined) {
			console.log(`error element: ${ this.trackPlayer}`);
			return;
		}
		this.trackPlayer.currentTime = newValue.value;
	}

	onRewind() {
		console.log('rewind');
		this.startHideTimer();
		if(this.trackPlayer === null ||
			 this.trackPlayer === undefined) {
			console.log(`error element: ${ this.trackPlayer}`);
			return;
		}
		this.trackPlayer.currentTime = this.currentTime - 10;
	}

	onForward() {
		console.log('forward');
		this.startHideTimer();
		if(this.trackPlayer === null ||
			 this.trackPlayer === undefined) {
			console.log(`error element: ${ this.trackPlayer}`);
			return;
		}
		this.trackPlayer.currentTime = this.currentTime + 10;
	}

	onMore() {
		console.log('more');
		this.startHideTimer();
		if(this.trackPlayer === null ||
			 this.trackPlayer === undefined) {
			console.log(`error element: ${ this.trackPlayer}`);
			return;
		}
	}
	onFullscreen() {
		console.log('fullscreen');
		this.startHideTimer();
		if(this.trackGlobal === null ||
			 this.trackGlobal === undefined) {
			console.log(`error element: ${ this.trackGlobal}`);
			return;
		}
		if(this.trackGlobal.requestFullscreen) {
			this.trackGlobal.requestFullscreen();
		} else if(this.trackGlobal.mozRequestFullScreen) {
			this.trackGlobal.mozRequestFullScreen();
		} else if(this.trackGlobal.webkitRequestFullscreen) {
			this.trackGlobal.webkitRequestFullscreen();
		} else if(this.trackGlobal.msRequestFullscreen) {
			this.trackGlobal.msRequestFullscreen();
		}
	}

	onFullscreenExit() {
		this.onFullscreenExit22(document);
	}
	onFullscreenExit22(docc:any) {
		console.log('fullscreen EXIT');
		this.startHideTimer();
		if(this.trackGlobal === null ||
			 this.trackGlobal === undefined) {
			console.log(`error element: ${ this.trackGlobal}`);
			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) {
		let 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.trackPlayer === null ||
			 this.trackPlayer === undefined) {
			console.log(`error element: ${ this.trackPlayer}`);
			return;
		}
		this.volumeValue = newValue.value;
		this.trackPlayer.volume = this.volumeValue / 100;
		this.trackPlayer.muted = false;
	}

	onVolumeMute() {
		this.startHideTimer();
		if(this.trackPlayer === null ||
			 this.trackPlayer === undefined) {
			console.log(`error element: ${ this.trackPlayer}`);
			return;
		}
		this.trackPlayer.muted = true;
	}

	onVolumeUnMute() {
		this.startHideTimer();
		if(this.trackPlayer === null ||
				 this.trackPlayer === undefined) {
			console.log(`error element: ${ this.trackPlayer}`);
			return;
		}
		this.trackPlayer.muted = false;
	}

	onTakeScreenShoot() {
		this.startHideTimer();
		// const canvas = document.createElement("canvas");
		// scale the canvas accordingly
		this.videoCanva.width = this.trackPlayer.videoWidth;
		this.videoCanva.height = this.trackPlayer.videoHeight;
		// draw the track at that frame
		this.videoCanva.getContext('2d').drawImage(this.trackPlayer, 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((blob) => {
			self.trackService.uploadCoverBlob(blob, this.idTrack);
		}, '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.trackService.uploadCoverBlob(blob, this.idTrack);
		});
		*/
	}
}