/** @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: string = "";
	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.(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);
		});
		*/
	}
}