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

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';


import { PopInService } from '../../service/popin';
import { TypeService } from '../../service/type';
import { UniverseService } from '../../service/universe';
import { SeriesService } from '../../service/series';
import { VideoService } from '../../service/video';
import { ArianeService } from '../../service/ariane';
import { UploadProgress } from '../../popin/upload-progress/upload-progress';

export interface ElementList {
	value?: number;
	label: string;
}


class DataToSend {
	name:string = '';
	description:string = '';
	episode:number = undefined;
	universeId:number = null;
	seriesId:number = null;
	seasonId:number = null;
	dataId:number = -1;
	time:number = undefined;
	typeId:number = null;
	covers:Array<any> = [];
	generatedName:string = '';
	clone() {
		let tmp = new DataToSend();
		tmp.name = this.name;
		tmp.description = this.description;
		tmp.episode = this.episode;
		tmp.universeId = this.universeId;
		tmp.seriesId = this.seriesId;
		tmp.seasonId = this.seasonId;
		tmp.dataId = this.dataId;
		tmp.time = this.time;
		tmp.typeId = this.typeId;
		tmp.covers = this.covers;
		tmp.generatedName = this.generatedName;
		return tmp;
	}
}

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

export class VideoEditScene implements OnInit {
	idVideo:number = -1;
	itemIsRemoved:boolean = false;
	itemIsNotFound:boolean = false;
	itemIsLoading:boolean = true;

	error:string = '';

	data:DataToSend = new DataToSend();
	dataOri:DataToSend = new DataToSend();
	coverFile:File;
	uploadFileValue:string = '';
	selectedFiles:FileList;
	needSend:boolean = false;


	// section tha define the upload value to display in the pop-in of upload
	upload:UploadProgress = new UploadProgress();
	// ---------------  confirm section  ------------------
	public confirmDeleteComment:string = null;
	public confirmDeleteImageUrl:string = null;
	private deleteCoverId:number = null;
	private deleteMediaId:number = null;
	deleteConfirmed() {
		if(this.deleteCoverId !== null) {
			this.removeCoverAfterConfirm(this.deleteCoverId);
			this.cleanConfirm();
		}
		if(this.deleteMediaId !== null) {
			this.removeItemAfterConfirm(this.deleteMediaId);
			this.cleanConfirm();
		}
	}
	cleanConfirm() {
		this.confirmDeleteComment = null;
		this.confirmDeleteImageUrl = null;
		this.deleteCoverId = null;
		this.deleteMediaId = null;
	}

	coversDisplay:Array<any> = [];

	listType: ElementList[] = [
		{ value: undefined, label: '---' },
	];
	listUniverse: ElementList[] = [
		{ value: undefined, label: '---' },
		{ value: null, label: '---' },
	];
	listSeries: ElementList[] = [
		{ value: undefined, label: '---' },
	];
	listSeason: ElementList[] = [
		{ value: undefined, label: '---' },
	];
	constructor(private route: ActivatedRoute,
	            private typeService: TypeService,
	            private universeService: UniverseService,
	            private seriesService: SeriesService,
	            private videoService: VideoService,
	            private arianeService: ArianeService,
	            private popInService: PopInService) {

	}

	updateNeedSend(): boolean {
		this.needSend = false;
		if(this.data.name !== this.dataOri.name) {
			this.needSend = true;
		}
		if(this.data.description !== this.dataOri.description) {
			this.needSend = true;
		}
		if(this.data.episode !== this.dataOri.episode) {
			this.needSend = true;
		}
		if(this.data.time !== this.dataOri.time) {
			this.needSend = true;
		}
		if(this.data.typeId !== this.dataOri.typeId) {
			this.needSend = true;
		}
		if(this.data.universeId !== this.dataOri.universeId) {
			this.needSend = true;
		}
		if(this.data.seriesId !== this.dataOri.seriesId) {
			this.needSend = true;
		}
		if(this.data.seasonId !== this.dataOri.seasonId) {
			this.needSend = true;
		}
		return this.needSend;
	}

	updateCoverList(covers: any) {
		this.coversDisplay = [];
		this.data.covers = [];
		if(covers !== undefined && covers !== null) {
			for(let iii = 0; iii < covers.length; iii++) {
				this.data.covers.push(covers[iii]);
				this.coversDisplay.push({
					id:covers[iii],
					url:this.videoService.getCoverThumbnailUrl(covers[iii])
				});
			}
		} else {
			this.coversDisplay = [];
		}
	}
	ngOnInit() {
		this.arianeService.updateManual(this.route.snapshot.paramMap);
		this.idVideo = this.arianeService.getVideoId();
		let self = this;
		this.listType = [ { value: null, label: '---' } ];
		this.listUniverse = [ { value: null, label: '---' } ];
		this.listSeries = [ { value: null, label: '---' } ];
		this.listSeason = [ { value: null, label: '---' } ];
		this.universeService.getData()
			.then((response2) => {
				for(let iii = 0; iii < response2.length; iii++) {
					self.listUniverse.push({ value: response2[iii].id, label: response2[iii].name });
				}
			}).catch((response2) => {
				console.log(`get response22 : ${ JSON.stringify(response2, null, 2)}`);
			});
		this.typeService.getData()
			.then((response2) => {
				for(let iii = 0; iii < response2.length; iii++) {
					self.listType.push({ value: response2[iii].id, label: response2[iii].name });
				}
			}).catch((response2) => {
				console.log(`get response22 : ${ JSON.stringify(response2, null, 2)}`);
			});
		// this.seriesService.getOrder()
		this.seriesService.getData()
			.then((response3) => {
				for(let iii = 0; iii < response3.length; iii++) {
					self.listSeries.push({ value: response3[iii].id, label: response3[iii].name });
					console.log(`[${ self.data.dataId }] Get series: ${ response3[iii].id }, label:${ response3[iii].name}`);
				}
			}).catch((response3) => {
				console.log(`get response3 : ${ JSON.stringify(response3, null, 2)}`);
			});
		this.videoService.get(this.idVideo)
			.then((response) => {
				console.log(`get response of video : ${ JSON.stringify(response, null, 2)}`);
				self.data.name = response.name;
				self.data.description = response.description;
				self.data.episode = response.episode;
				self.data.universeId = response.universId;
				if(self.data.universeId === undefined) {
					self.data.universeId = null;
				}
				self.data.dataId = response.dataId;
				self.data.time = response.time;
				self.data.generatedName = response.generatedName;
				self.onChangeType(response.typeId);
				self.onChangeSeries(response.seriesId);
				self.data.seasonId = response.seasonId;
				if(self.data.seasonId === undefined) {
					self.data.seasonId = null;
				}
				self.dataOri = self.data.clone();
				self.updateCoverList(response.covers);
				self.updateNeedSend();
				console.log(`coversList : ${ JSON.stringify(self.coversDisplay, null, 2)}`);
				self.itemIsLoading = false;
			}).catch((response) => {
				self.error = 'Can not get the data';
				self.data = new DataToSend();
				self.coversDisplay = [];
				self.dataOri = self.data.clone();
				self.updateNeedSend();
				self.itemIsNotFound = true;
				self.itemIsLoading = false;
			});
	}

	onChangeType(value:any):void {
		console.log(`Change requested of type ... ${value}`);
		this.data.typeId = value;
		if(this.data.typeId === undefined) {
			this.data.typeId = null;
		}
		this.data.seriesId = null;
		this.data.seasonId = null;
		this.listSeries = [ { value: undefined, label: '---' } ];
		this.listSeason = [ { value: undefined, label: '---' } ];
		let self = this;
		this.updateNeedSend();
		if(this.data.typeId !== undefined) {
			self.typeService.getSubSeries(this.data.typeId, [ 'id', 'name' ])
				.then((response2) => {
					for(let iii = 0; iii < response2.length; iii++) {
						self.listSeries.push({ value: response2[iii].id, label: response2[iii].name });
					}
				}).catch((response2) => {
					console.log(`get response22 : ${ JSON.stringify(response2, null, 2)}`);
				});
		}
	}

	onChangeUniverse(value:any):void {
		this.data.universeId = value;
		this.updateNeedSend();
	}

	onChangeSeries(value:any):void {
		this.data.seriesId = value;
		if(this.data.seriesId === undefined) {
			this.data.seriesId = null;
		}
		this.data.seasonId = null;
		this.listSeason = [ { value: undefined, label: '---' } ];
		let self = this;
		if(this.data.seriesId !== undefined) {
			self.seriesService.getSeason(this.data.seriesId, [ 'id', 'name' ])
				.then((response3) => {
					for(let iii = 0; iii < response3.length; iii++) {
						self.listSeason.push({ value: response3[iii].id, label: `season ${ response3[iii].name}` });
					}
				}).catch((response3) => {
					console.log(`get response22 : ${ JSON.stringify(response3, null, 2)}`);
				});
		}
		this.updateNeedSend();
	}
	onChangeSeason(value:any):void {
		this.data.seasonId = value;
		this.updateNeedSend();
	}

	onName(value:any):void {
		this.data.name = value;
		this.updateNeedSend();
	}

	onDescription(value:any):void {
		if(value.length === 0) {
			this.data.description = null;
		} else {
			this.data.description = value;
		}
		this.updateNeedSend();
	}
	onDate(value:any):void {
		if(value.value.length > 4) {
			value.value = this.data.time;
		} else {
			this.data.time = value.value;
		}
		if(this.data.time < 10) {
			this.data.time = null;
		}
		this.updateNeedSend();
	}

	onEpisode(value:any):void {
		if(value.value.length > 4) {
			value.value = this.data.episode;
		} else {
			this.data.episode = parseInt(value.value, 10);
		}
		this.updateNeedSend();
	}

	sendValues():void {
		console.log('send new values....');
		let data:any = {};
		if(this.data.name !== this.dataOri.name) {
			data.name = this.data.name;
		}
		if(this.data.description !== this.dataOri.description) {
			if(this.data.description === undefined) {
				data.description = null;
			} else {
				data.description = this.data.description;
			}
		}
		if(this.data.episode !== this.dataOri.episode) {
			data.episode = this.data.episode;
		}
		if(this.data.time !== this.dataOri.time) {
			data.time = this.data.time;
		}
		if(this.data.typeId !== this.dataOri.typeId) {
			if(this.data.typeId === undefined) {
				data.typeId = null;
			} else {
				data.typeId = this.data.typeId;
			}
		}
		if(this.data.universeId !== this.dataOri.universeId) {
			if(this.data.universeId === undefined) {
				data.universeId = null;
			} else {
				data.universeId = this.data.universeId;
			}
		}
		if(this.data.seriesId !== this.dataOri.seriesId) {
			if(this.data.seriesId === undefined) {
				data.seriesId = null;
			} else {
				data.seriesId = this.data.seriesId;
			}
		}
		if(this.data.seasonId !== this.dataOri.seasonId) {
			if(this.data.seasonId === undefined) {
				data.seasonId = null;
			} else {
				data.seasonId = this.data.seasonId;
			}
		}
		let tmpp = this.data.clone();
		let self = this;
		this.videoService.put(this.idVideo, data)
			.then((response3) => {
				self.dataOri = tmpp;
				self.updateNeedSend();
			}).catch((response3) => {
				console.log(`get response22 : ${ JSON.stringify(response3, null, 2)}`);
				self.updateNeedSend();
			});
	}

	// At the drag drop area
	// (drop)="onDropFile($event)"
	onDropFile(event: DragEvent) {
		event.preventDefault();
		// this.uploadFile(event.dataTransfer.files[0]);
		console.log('error in drag & drop ...');
	}

	// At the drag drop area
	// (dragover)="onDragOverFile($event)"
	onDragOverFile(event) {
		event.stopPropagation();
		event.preventDefault();
	}

	// At the file input element
	// (change)="selectFile($event)"
	onChangeCover(value:any):void {
		this.selectedFiles = value.files;
		this.coverFile = this.selectedFiles[0];
		console.log(`select file ${ this.coverFile.name}`);
		this.uploadCover(this.coverFile);
		this.updateNeedSend();
	}

	uploadCover(file?:File) {
		if(file === undefined) {
			console.log('No file selected!');
			return;
		}
		let self = this;
		// clean upload labels*
		this.upload.clear();
		// display the upload pop-in
		this.popInService.open('popin-upload-progress');
		this.videoService.uploadCover(file, this.idVideo, (count, total) => {
	    	self.upload.mediaSendSize = count;
	    	self.upload.mediaSize = total;
	    })
			.then((response:any) => {
				console.log(`get response of cover : ${ JSON.stringify(response, null, 2)}`);
				self.upload.result = 'Cover added done';
				// we retrive the whiole media ==> update data ...
				self.updateCoverList(response.covers);
			}).catch((response:any) => {
			// self.error = "Can not get the data";
				console.log('Can not add the cover in the video...');
				self.upload.error = `Error in the upload of the cover...${ JSON.stringify(response, null, 2)}`;
			});
	}

	removeCover(id:number) {
		this.cleanConfirm();
		this.confirmDeleteComment = `Delete the cover ID: ${ id}`;
		this.confirmDeleteImageUrl = this.seriesService.getCoverThumbnailUrl(id);
		this.deleteCoverId = id;
		this.popInService.open('popin-delete-confirm');
	}
	removeCoverAfterConfirm(id:number) {
		console.log(`Request remove cover: ${ id}`);
		let self = this;
		this.videoService.deleteCover(this.idVideo, id)
			.then((response:any) => {
				console.log(`get response of remove cover : ${ JSON.stringify(response, null, 2)}`);
				self.upload.result = 'Cover remove done';
				// we retrive the whiole media ==> update data ...
				self.updateCoverList(response.covers);
			}).catch((response:any) => {
				// self.error = "Can not get the data";
				console.log('Can not remove the cover of the video...');
				self.upload.error = `Error in the upload of the cover...${ JSON.stringify(response, null, 2)}`;
			});
	}
	removeItem() {
		console.log('Request remove Media...');
		this.cleanConfirm();
		this.confirmDeleteComment = `Delete the Media: ${ this.idVideo}`;
		this.deleteMediaId = this.idVideo;
		this.popInService.open('popin-delete-confirm');
	}
	removeItemAfterConfirm(id:number) {
		let self = this;
		this.videoService.delete(id)
			.then((response3) => {
				// self.dataOri = tmpp;
				// self.updateNeedSend();
				self.itemIsRemoved = true;
			}).catch((response3) => {
				// self.updateNeedSend();
			});
	}

	eventPopUpSeason(event: string): void {
		console.log(`GET event: ${ event}`);
		this.popInService.close('popin-new-season');
	}
	eventPopUpSeries(event: string): void {
		console.log(`GET event: ${ event}`);
		this.popInService.close('popin-new-series');
	}
	eventPopUpType(event: string): void {
		console.log(`GET event: ${ event}`);
		this.popInService.close('popin-new-type');
	}
	eventPopUpUniverse(event: string): void {
		console.log(`GET event: ${ event}`);
		this.popInService.close('popin-new-universe');
	}

	newSeason(): void {
		console.log('Request new Season...');
		this.popInService.open('popin-new-season');
	}
	newSeries(): void {
		console.log('Request new Series...');
		this.popInService.open('popin-new-series');
	}
	newType(): void {
		console.log('Request new Type...');
		this.popInService.open('popin-create-type');
	}
	newUniverse() {
		console.log('Request new Universe...');
		this.popInService.open('popin-new-universe');
	}
}