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

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Location } from '@angular/common';
import { NgForm } from '@angular/forms';
import { FormGroup, FormControl } from "@angular/forms";
import { fadeInAnimation } from '../../_animations/index';
import { HttpWrapperService } from '../../service/http-wrapper';
import { HttpEventType, HttpResponse} from '@angular/common/http';


import { PopInService } from '../../service/popin';
import { TypeService } from '../../service/type';
import { UniversService } from '../../service/univers';
import { GroupService } from '../../service/group';
import { VideoService } from '../../service/video';
import { DataService } from '../../service/data';
import { ArianeService } from '../../service/ariane';

export class ElementList {
	value: number;
	label: string;
	constructor(_value: number, _label: string) {
		this.value = _value;
		this.label = _label;
	}
}


class DataToSend {
	name:string = ""
	description:string = ""
	episode:number = undefined
	univers_id:number = undefined
	serie_id:number = undefined
	saison_id:number = undefined
	data_id:number = -1
	time:number = undefined
	type_id:number = undefined
	covers:Array<any> = [];
	generated_name:string = ""
	clone() {
		let tmp = new DataToSend();
		tmp.name = this.name
		tmp.description = this.description
		tmp.episode = this.episode
		tmp.univers_id = this.univers_id
		tmp.serie_id = this.serie_id
		tmp.saison_id = this.saison_id
		tmp.data_id = this.data_id
		tmp.time = this.time
		tmp.type_id = this.type_id
		tmp.covers = this.covers
		tmp.generated_name = this.generated_name
		return tmp;
	}
};

@Component({
	selector: 'app-video-edit',
	templateUrl: './video-edit.html',
	styleUrls: ['./video-edit.less'],
	animations: [fadeInAnimation],
	host: { '[@fadeInAnimation]': '' }
})
// https://www.sitepoint.com/angular-forms/
export class VideoEditComponent implements OnInit {
	id_video:number = -1;
	
	error:string = ""
	
	data:DataToSend = new DataToSend();
	data_ori:DataToSend = new DataToSend();
	coverFile:File;
	upload_file_value:string = ""
	selectedFiles:FileList;
	need_send:boolean = false;
	
	covers_display:Array<any> = [];
	
	listType: ElementList[] = [
		{value: undefined, label: '---'},
	];
	listUnivers: ElementList[] = [
		{value: undefined, label: '---'},
		{value: null, label: '---'},
	];
	listGroup: ElementList[] = [
		{value: undefined, label: '---'},
	];
	listSaison: ElementList[] = [
		{value: undefined, label: '---'},
	];
	constructor(private route: ActivatedRoute,
	            private router: Router,
	            private locate: Location,
	            private dataService: DataService,
	            private typeService: TypeService,
	            private universService: UniversService,
	            private groupService: GroupService,
	            private videoService: VideoService,
	            private httpService: HttpWrapperService,
	            private arianeService: ArianeService,
	            private popInService: PopInService) {
		
	}
	
	updateNeedSend(): boolean {
		this.need_send = false;
		if (this.data.name != this.data_ori.name) {
			this.need_send = true;
		}
		if (this.data.description != this.data_ori.description) {
			this.need_send = true;
		}
		if (this.data.episode != this.data_ori.episode) {
			this.need_send = true;
		}
		if (this.data.time != this.data_ori.time) {
			this.need_send = true;
		}
		if (this.data.type_id != this.data_ori.type_id) {
			this.need_send = true;
		}
		if (this.data.univers_id != this.data_ori.univers_id) {
			this.need_send = true;
		}
		if (this.data.serie_id != this.data_ori.serie_id) {
			this.need_send = true;
		}
		if (this.data.saison_id != this.data_ori.saison_id) {
			this.need_send = true;
		}
		return this.need_send;
	}
	
	ngOnInit() {
		this.id_video = parseInt(this.route.snapshot.paramMap.get('video_id'));
		this.arianeService.setVideo(this.id_video);
		let self = this;
		this.listType = [{value: undefined, label: '---'}];
		this.listUnivers = [{value: undefined, label: '---'}];
		this.listGroup = [{value: undefined, label: '---'}];
		this.listSaison = [{value: undefined, label: '---'}];
		this.universService.getData()
			.then(function(response2) {
				for(let iii= 0; iii < response2.length; iii++) {
					self.listUnivers.push({value: response2[iii].id, label: response2[iii].name});
				}
			}).catch(function(response2) {
				console.log("get response22 : " + JSON.stringify(response2, null, 2));
			});
		this.typeService.getData()
			.then(function(response2) {
				for(let iii= 0; iii < response2.length; iii++) {
					self.listType.push({value: response2[iii].id, label: response2[iii].name});
				}
			}).catch(function(response2) {
				console.log("get response22 : " + JSON.stringify(response2, null, 2));
			});
		//this.groupService.getOrder()
		this.groupService.getData()
			.then(function(response3) {
				for(let iii= 0; iii < response3.length; iii++) {
					self.listGroup.push({value: response3[iii].id, label: response3[iii].name});
					console.log("[" + self.data.data_id + "] Get serie: " + response3[iii].id + ", label:" + response3[iii].name)
				}
			}).catch(function(response3) {
				console.log("get response3 : " + JSON.stringify(response3, null, 2));
			});
		this.videoService.get(this.id_video)
			.then(function(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.univers_id = response.univers_id;
				self.data.data_id = response.data_id;
				self.data.time = response.time;
				self.data.generated_name = response.generated_name;
				self.onChangeType(response.type_id);
				self.onChangeGroup(response.serie_id);
				self.data.saison_id = response.saison_id;
				self.data_ori = self.data.clone();
				if (response.covers !== undefined && response.covers !== null) {
					for (let iii=0; iii<response.covers.length; iii++) {
						self.data.covers.push(response.covers[iii]);
						self.covers_display.push({
							id:response.covers[iii],
							url:self.videoService.getCoverUrl(response.covers[iii])
							});
					}
				} else {
					self.covers_display = []
				}
				self.updateNeedSend();
				console.log("covers_list : " + JSON.stringify(self.covers_display, null, 2));
			}).catch(function(response) {
				self.error = "Can not get the data";
				self.data = new DataToSend();
				self.covers_display = [];
				self.data_ori = self.data.clone();
				self.updateNeedSend();
			});
	}
	
	onChangeType(_value:any):void {
		console.log("Change requested of type ... " + _value);
		this.data.type_id = _value;
		//this.data.serie_id = null;
		//this.data.saison_id = null;
		//this.listGroup = [{value: undefined, label: '---'}];
		//this.listSaison = [{value: undefined, label: '---'}];
		let self = this;
		this.updateNeedSend();
		/*
		if (this.type_id != undefined) {
			self.typeService.getSubGroup(this.type_id, ["id", "name"])
				.then(function(response2) {
					for(let iii= 0; iii < response2.length; iii++) {
						self.listGroup.push({value: response2[iii].id, label: response2[iii].name});
					}
				}).catch(function(response2) {
					console.log("get response22 : " + JSON.stringify(response2, null, 2));
				});
		}
		*/
	}
	
	onChangeUnivers(_value:any):void {
		this.data.univers_id = _value;
		this.updateNeedSend();
	}
	
	onChangeGroup(_value:any):void {
		this.data.serie_id = _value;
		this.data.saison_id = null;
		this.listSaison = [{value: undefined, label: '---'}];
		let self = this;
		if (this.data.serie_id != undefined) {
			self.groupService.getSaison(this.data.serie_id, ["id", "name"])
				.then(function(response3) {
					for(let iii= 0; iii < response3.length; iii++) {
						self.listSaison.push({value: response3[iii].id, label: "saison " + response3[iii].name});
					}
				}).catch(function(response3) {
					console.log("get response22 : " + JSON.stringify(response3, null, 2));
				});
		}
		this.updateNeedSend();
	}
	onChangeSaison(_value:any):void {
		this.data.saison_id = _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;
		}
		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 = {}
		if (this.data.name != this.data_ori.name) {
			data["name"] = this.data.name;
		}
		if (this.data.description != this.data_ori.description) {
			data["description"] = this.data.description;
		}
		if (this.data.episode != this.data_ori.episode) {
			data["episode"] = this.data.episode;
		}
		if (this.data.time != this.data_ori.time) {
			data["time"] = this.data.time;
		}
		if (this.data.type_id != this.data_ori.type_id) {
			data["type_id"] = this.data.type_id;
		}
		if (this.data.univers_id != this.data_ori.univers_id) {
			data["univers_id"] = this.data.univers_id;
		}
		if (this.data.serie_id != this.data_ori.serie_id) {
			data["serie_id"] = this.data.serie_id;
		}
		if (this.data.saison_id != this.data_ori.saison_id) {
			data["saison_id"] = this.data.saison_id;
		}
		let tmpp = this.data.clone();
		let self = this;
		this.videoService.put(this.id_video, data)
			.then(function(response3) {
				self.data_ori = tmpp;
				self.updateNeedSend();
			}).catch(function(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]);
	}
	
	// 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.uploadFile(this.coverFile);
		this.updateNeedSend();
	}
	
	uploadFile(_file:File) {
		if (_file == undefined) {
			console.log("No file selected!");
			return;
		}
		let self = this;
		this.dataService.sendFile(_file)
			.then(function(response) {
				console.log("get response of video : " + JSON.stringify(response, null, 2));
				let id_of_image = response.id;
				self.videoService.addCover(self.id_video, id_of_image)
					.then(function(response) {
						console.log("cover added");
						self.covers_display.push(self.videoService.getCoverUrl(id_of_image));
					}).catch(function(response) {
						console.log("Can not cover in the cover_list...");
					});
			}).catch(function(response) {
				//self.error = "Can not get the data";
				console.log("Can not add the data in the system...");
			});
	}
	removeCover(_id) {
		console.log("Request remove cover: " + _id);
	}
	removeMedia() {
		console.log("Request remove Media...");
		this.videoService.delete(this.id_video)
			.then(function(response3) {
				//self.data_ori = tmpp;
				//self.updateNeedSend();
			}).catch(function(response3) {
				
				//self.updateNeedSend();
			});
	}
	
	eventPopUpSaison(_event: string): void {
		console.log("GET event: " + _event);
		this.popInService.close("popin-new-saison");
	}
	eventPopUpSerie(_event: string): void {
		console.log("GET event: " + _event);
		this.popInService.close("popin-new-serie");
	}
	eventPopUpType(_event: string): void {
		console.log("GET event: " + _event);
		this.popInService.close("popin-new-type");
	}
	eventPopUpUnivers(_event: string): void {
		console.log("GET event: " + _event);
		this.popInService.close("popin-new-univers");
	}
	
	newSaison(): void {
		console.log("Request new Saison...");
		this.popInService.open("popin-new-saison");
	}
	newSerie(): void {
		console.log("Request new Serie...");
		this.popInService.open("popin-new-serie");
	}
	newType(): void {
		console.log("Request new Type...");
		this.popInService.open("popin-create-type");
	}
	newUnivers() {
		console.log("Request new Univers...");
		this.popInService.open("popin-new-univers");
	}
}