import { Template } from 'meteor/templating';

import './main.html';

var openValues = {
	"menu": "-25%",
	"options": "-20%"
};

var themeColors = {
	"light": {
		"background":"White.jpg",
		"header":"#EBEBEB",
		"sidebar":"#65839A",
		"statusIcons":"#33ADFF",
		"highlightText":"#FF1A1A",
		"cards":"#FEFEFE"
	},
	"dark": {

	}
};
var calendarColors = {
	"test": "red",
	"project": "blue",
	"normal": "green",
	"quiz": "black"
}
var options = {
	"privacy": ["Public", "Hidden"],
	"category": ["Class", "Club", "Other"]
}

var searchSchools = [];

Session.set("sidebar",null);
Session.set("mode",null); // Change to user preferences

Template.registerHelper( 'divColor', (div) => {
	return themeColors[Cookie.get("theme")][div];	
})

Template.registerHelper( 'overlayDim', (part) => {
	var dim = [window.innerWidth * .2,window.innerHeight * .2];
	var width = "width:"+dim[0].toString() + "px;";
	var height = "height:"+dim[1].toString() + "px;";
	var margin = "margin-left:"+(-dim[0]/2).toString() + "px;";
	var bg = "background-color:"+themeColors[Cookie.get("theme")]["header"]+";";
	return width+height+margin+bg;
})

Template.main.helpers({
	schoolName() {
		return " - " + Meteor.user().profile.school;
	},
	iconColor(icon) {
		if(Session.get("sidebar") === icon+"Container") {
			return themeColors[Cookie.get("theme")].statusIcons;
		} else if(Session.get("sidebar") === "both") {
			return themeColors[Cookie.get("theme")].statusIcons;
		} else {
			return;
		}
	},
	bgSrc() {
		var dim = [window.innerWidth,window.innerHeight];
		var pic = themeColors[Cookie.get("theme")].background;
		return pic;
	},
	menuStatus() {
	  	if(Session.get("sidebar") === "menuContainer") {
	  		return "0%";
	  	} else if(Session.get("sidebar") === "both") {
	  		return "0%";
	  	} else {
	  		return openValues["menu"];
	  	}
	},
	optionsStatus() {
	  	if(Session.get("sidebar") === "optionsContainer") {
	  		return "0%";
	  	} else if(Session.get("sidebar") === "both") {
	  		return "0%";
	  	} else {
	  		return openValues["options"];
	  	}
	},
	modeStatus(status) {
		if(status === Session.get("mode")) {
			return themeColors[Cookie.get("theme")].highlightText;
		} else {
			return;
		}
	},
	currMode(name) {
		if(name === Session.get("mode")) {
			return true;
		} else {
			return false;
		}
	},
	calendarOptions() {
		var cursor = work.find({});
		var events = [];
		cursor.forEach(function(current) {
			backgroundColor = calendarColors[current.type];
			title = current.name;
			duedate = current.dueDate.toISOString().slice(0,10);
			events.push({start: duedate, title: title, backgroundColor: backgroundColor});			    
		});
		return {
			height: window.innerHeight *.8,
			events: events,
			buttonText: {
			    today:    'Today',
			    month:    'Month',
			    week:     'Week',
			    day:      'Day'
			}
		};
	},
	calCenter() {
		var width = window.innerWidth * .85;
		return "width:"+width.toString()+"px;margin-left:"+(.5*window.innerWidth-.5*width).toString()+"px"; 
	},
	calbg() {
		var width = window.innerWidth * .865;
		var height = window.innerHeight * .76;
		return "width:"+width.toString()+"px;height:"+height.toString()+"px;margin-left:"+(.5*window.innerWidth-.5*width).toString()+"px;margin-top:"+(.47*window.innerHeight-.5*height).toString()+"px"; 
	}
});

Template.main.events({
	'click .fa-bars' () {
		var side = Session.get("sidebar");
		if(side === "menuContainer") {
			Session.set("sidebar",null)
		} else if(side === "optionsContainer") {
			Session.set("sidebar","both");
		} else if(side === "both") {
			Session.set("sidebar","optionsContainer");
		} else {
			Session.set("sidebar","menuContainer");
		}
	},
	'click .fa-cog' () {
		var side = Session.get("sidebar");
		if(side === "optionsContainer") {
			Session.set("sidebar",null)
		} else if(side === "menuContainer") {
			Session.set("sidebar","both");
		} else if(side === "both") {
			Session.set("sidebar","menuContainer");
		} else {
			Session.set("sidebar","optionsContainer");
		}
	},
	'click .classes' () {
		if(Session.get("mode") === "classes") return;
		var modeHolder = document.getElementById("mainBody");
		closeDivFade(modeHolder);
		setTimeout(function() {
			Session.set("mode","classes");
			openDivFade(modeHolder);
		}, 300);	
	},
	'click .calendar' () {
		if(Session.get("mode") === "calendar") return;
		var modeHolder = document.getElementById("mainBody");
		closeDivFade(modeHolder);
		setTimeout(function() {
			Session.set("mode","calendar");
			openDivFade(modeHolder);
		}, 300);
	},
	'click' (event) {
		var e = event.target.className;
		if(e !== Session.get("sidebar") && 
		!e.includes("fa-cog") && 
		!e.includes("fa-bars") && 
		!document.getElementById("menuContainer").contains(event.target) && 
		!document.getElementById("optionsContainer").contains(event.target)) {
			Session.set("sidebar", null);
		}
	}
});

function openDivFade(div) {
	div.style.display = "block";
	div.style.opacity = "0";
	setTimeout(function() {
		div.style.opacity = "1";
	}, 100);
}

function closeDivFade(div) {
	div.style.opacity = "0";
	setTimeout(function() {
		div.style.display = "none";
	}, 100);
}

function sendData() {
	// Take form data
}