// init text editor in modal
var quill = new Quill('#messageTextArea', {
  modules: {
    toolbar: [
      [{ 'size': ['small', false, 'large'] }],
	  [{ 'font': [] }],
      ['bold', 'italic', 'underline','strike'],
      [{ 'color': [] }],
    ]
  },
  placeholder: '',
  theme: 'snow'  // or 'bubble',
});

$("#sendNewPlane").on('click',function(){
    
	//hiding navbar
	$('.navbar-collapse').collapse('hide');
	//hiding modal
	$("#newPlaneModal").modal('hide')

	var line = turf.lineString([expeLoc.center,destLoc.center]) //create line between start and end
	var length = turf.length(line) //get length in Km
	var speed = 30 //speed in km/h
	var time = length/speed //time to delivery in hours
	
	
	//get the local time with TZ for starting point
	$.getJSON('https://api.mapbox.com/v4/examples.4ze9z6tv/tilequery/'+expeLoc.center[0]+','+expeLoc.center[1]+'.json?access_token='+mapboxgl.accessToken+'',function(startTime){
		var expeTimezone = startTime.features[0].properties.TZID;
		var sentDate = moment.tz(new Date(), expeTimezone);
		sentDate = [sentDate.format(),expeTimezone]
		
		//get the local time with TZ for end point
		$.getJSON('https://api.mapbox.com/v4/examples.4ze9z6tv/tilequery/'+destLoc.center[0]+','+destLoc.center[1]+'.json?access_token='+mapboxgl.accessToken+'',function(endTime){
			var destTimezone = endTime.features[0].properties.TZID;
			var endDate = moment.tz(new Date(), destTimezone);
			var deliveryDate = endDate.add(time, 'hours') // adding hours 
			deliveryDate = [endDate.format(),destTimezone]
			
			//storing the endDate in GMT+0 in seconds for the query
			var deliverySecondsServer = moment.tz(new Date(), "Europe/London").add(time, 'hours').unix()
			
			var publicMessage = $("#publicMessage").prop("checked")
			var message = $("#messageTextArea").val()
			
			var data = {
				'message':message,
				'public':publicMessage,
				'expeMail':$("#expeMail").val(),
				'destMail':$("#destMail").val(),
				'expeName':expeLoc.name,
				'destName':destLoc.name,
				'expeCoordo':expeLoc.center,
				'destCoordo':destLoc.center,
				'sentDate': sentDate,
				'deliveryDate':deliveryDate,
				'deliverySecondsServer':deliverySecondsServer,
			}
			//sending confirm mail
			
			//sending notif mail
			
			//scheduling mail
			
			//adding the plane
			var planes = db.collection('planes')
			if (!publicMessage){ //removing message from DB if not public
				data.message = ''
			}
			planes.add({
				public: data.public,
				message:data.message,
				destName: data.destName,
				destCoordo: data.destCoordo,
				startName: data.expeName,
				startCoordo: data.expeCoordo,
				sentDate: data.sentDate,
				deliveryDate: data.deliveryDate,
				deliverySecondsServer: data.deliverySecondsServer
			});
			
		// creating image for plane, need to link it to the inputs tog et entered values.
		var canvas = document.getElementById("blankCanvas");
		var ctx = canvas.getContext("2d");
		ctx.fillStyle = "rgb(255,255,255)";
		ctx.fillRect(0,0,400,400);
		ctx.fillStyle = "rgb(0,0,0)";
		ctx.font = "9px Courier";
		ctx.fillText("Message: .- / -- --- -. / ... . -. ... --..-- /",10,60);
		ctx.fillText("Expediteur: leo.martine@yahoo.fr - Annemasse",10,300);
		ctx.fillText("Destinataire: leo.martine@yahoo.fr - Lyon",10,320);
		$("#front").attr('src',document.getElementById("blankCanvas").toDataURL())
	
			
		//display and animate plane
		$("#canvas3d").css('display','block')
		animePlane()
		//moving plane at the end
		setInterval(function(){
			$("#canvas3d").css('transition','transform 2500ms ease-in-out')
			$("#canvas3d").css('transform','translate(50vw, -150vh)')
		},4400);
		//reloading page (to change)
		setInterval(function(){
			window.location.href = "http://127.0.0.1:8887/?plane=1FTMbm9V9eindbwoJ9uW";
		},5500);

		})
	});
})