import './SalesSheets.html';
import './SalesSheetForm.js';
import './SalesSheetEditor.js';
import swal from 'sweetalert2';

let PREFIX = "SalesSheets.";

Template.SalesSheets.onCreated(function() {
	this.subscribe("products");
	this.subscribe("venues");
	this.subscribe("measures");
	this.subscribe("salesSheets");
});
Template.SalesSheets.onDestroyed(function() {
	// Reset the view's session variables used for navigation.
	Session.set(PREFIX + "currentFormName", undefined);
	Session.set(PREFIX + "activeTemplateName", undefined);
});

//******************************************************************
//** Container template that allows a user to pick a sheet and either fill it out OR edit it.
//******************************************************************
Template.SalesSheetsMain.onCreated(function() {
	//Save the previous session state - whether we are editing the selected sheet.
	//The name of the currently active page tab.  This will either be the SalesSheetForm or the SalesSheetEditor.
	if(!Session.get(PREFIX + "activeTemplateName")) Session.set(PREFIX + "activeTemplateName", "SalesSheetForm");

	this.sheets = Meteor.collections.SalesSheets.find({}, {sort: {name: 1}});
	let sheetArray = this.sheets.fetch();
	Session.set(PREFIX + 'selectedSheet', sheetArray.length > 0 ? sheetArray[0] : null);
});
Template.SalesSheetsMain.helpers({
	sheets: function() {
		//let sheets = Meteor.collections.SalesSheets.find({}, {sort: {name: 1}}).fetch();
		//
		//if(sheets && sheets.length > 0) sheets[0].isFirst = true;
		//
		//return sheets;
		return Template.instance().sheets;
	},
	isSheetSelected: function() {  // Determines if the passed sheet is the selected sheet and returns either "selected" or "".
		let selectedSheet = Session.get(PREFIX + "selectedSheet");
		
		return selectedSheet == this ? "selected" : "";
	},
	disableButtons: function() {  // Disable the edit & delete functionality if nothing is selected.
		return !Session.get(PREFIX + "selectedSheet");
	},
	activeTemplateName: function() {  // The name of the template actively being shown to the user in the content area.
		return Session.get(PREFIX + "activeTemplateName");
	},
	selectedSheetId: function() {  // Gets the ID of the sheet currently selected.  This is passed to the template being actively show to the user.
		return Session.get(PREFIX + "selectedSheet") ? Session.get(PREFIX + "selectedSheet")._id : null;
	},
	hasSelectedSheet: function() {  // Determines whether any sheet has been selected.
		return Session.get(PREFIX + "selectedSheet");
	},
	isEditingSheet: function() {
		return Session.get(PREFIX + "activeTemplateName") == "SalesSheetEditor";
	}
});
Template.SalesSheetsMain.events({
	'change select[name="sheetSelection"]': function(event, template) {
		let id = $(event.target).val();
		let selected = Meteor.collections.SalesSheets.findOne(id);
		
		Session.set(PREFIX + "selectedSheet", selected);
		// Reset the editor button & the displayed tab.
		Session.set(PREFIX + "activeTemplateName", "SalesSheetForm");
	},
	'click .editSheet': function(event, template) {
		if(!$(event.target).hasClass("selected")) {
			// Display the editor for the sheet.
			Session.set(PREFIX + "activeTemplateName", "SalesSheetEditor");
		}
		else {
			// Remove the sheet editor and show the form to fill out the sheet.
			Session.set(PREFIX + "activeTemplateName", "SalesSheetForm");
			// Reset the editor session variables.
			Session.set(PREFIX + "currentFormName", undefined);
		}
	},
	'click .deleteSheet': function(event, template) {
		let selectedSheet = Session.get(PREFIX + "selectedSheet");
		
		if(selectedSheet) {
			swal({
				title: "Are you sure?",
				text: "This will permanently remove the sale sheet named " + selectedSheet.name + ".",
				type: "question",
				showCancelButton: true,
				confirmButtonColor: "#DD6B55",
				confirmButtonText: "Yes"
			}).then(
				function(isConfirm) {
					if(isConfirm) {
						Meteor.call('removeSalesSheet', selectedSheet._id, function(error) {
							if(error) sAlert.error("Failed to delete the sheet!\n" + error);
							else {
								Session.set(PREFIX + "selectedSheet", Meteor.collections.SalesSheets.findOne({}, {sort: {name: 1}}));
							}
						});
					}
				},
				function(dismiss) {}
			);
		}
	},
	'click .createSheet': function(event, template) {
		let $input = template.$('input[name="newSheetName"]');
		
		if($input.hasClass('show')) {
			let name = $input.val();
			
			name = name ? name.trim() : undefined;
			name = name && name.length > 0 ? name : undefined;
			
			if(name) {
				Meteor.call('createSalesSheet', name, function(error, id) {
					if(error) sAlert.error("Failed to create the sheet!\n" + error);
					else {
						//Quick hack to attempt to allow the sheet we created to be added to the select box before we try to select it and edit it.
						let count = 0;
						let interval = setInterval(function() {
							let selected = Meteor.collections.SalesSheets.findOne(id);
							
							if(selected) {
								//Select the sheet in the drop down.
								template.$('select[name="sheetSelection"]').val(id);
								Session.set(PREFIX + "selectedSheet", selected);
								//Display the editor tab.
								Session.set(PREFIX + "activeTemplateName", "SalesSheetEditor");
								clearInterval(interval);
							}
							else count++;
							
							//Avoid infinite loop that should never happen.
							if(count > 100) clearInterval(interval);
						}, 100);
					}
				});
			}
			
			$input.removeClass('show');
			$(event.target).toggleClass('move');
		}
		else {
			$input.addClass('show');
			$(event.target).toggleClass('move');
		}
	}
});