var ReportDialog = (function() {
	'use strict';
	var templates = new Templates(),
		emailRe = /^.+@.+\..+$/,
		freqData = { data: [
			{ title: "Select Frequency", placeholder: true},
			{ title: 'Daily', value: 'daily' },
			{ title: 'Weekly', value: 'weekly' },
			{ title: 'Monthly', value: 'monthly' },
		]},
		typeData = { data: [
			{ title: "Select Format", placeholder: true},
			{ title: 'Excel (XLSX)', value: 'xlsx' },
			{ title: 'CSV (zip)', value: 'csv' },
			{ title: 'Raw JSON', value: 'json' },
		]};

	function check(data) {
		if(!data.frequency) return 'Please select send frequency.';
		if(!data.format) return 'Please select report format.';
		if(!data.recipient || !emailRe.test(data.recipient)) return 'Please enter a valid email address.';
	}
	function ReportDialog(typ) {
		this.tmpl = templates[typ] || templates.na;
		this.data = {};
	}

	ReportDialog.prototype = {
		// cb return true to close the dialog, string to set an error and remain open.
		show: function(data, cb) { // todo handle multiple types
			if(!cb) cb = function() {};
			this.dlg = new Modal({ 'contents' : this.tmpl.html, 'title' : this.tmpl.title, 'className': 'auto' });

			var self = this,
				byID = function(id) { return self.dlg.element.querySelector('#' + id) };

			this.eles = new Elements(this.dlg.element, {
				freq: { target: new Dropdown(byID('freq'), freqData, function(v) { self.data.frequency = v; }) },
				fmt: { target: new Dropdown(byID('fmt'), typeData, function(v) { self.data.format = v; }) },
				recip: { target: byID('recip') },
				err: { target: byID('err') },
				nm: { target: byID('cancel') },
				doit: { target: byID('doit') },
			});
			if(data && data.frequency) this.eles.freq.setValue(data.frequency);
			if(data && data.format) this.eles.fmt.setValue(data.format);
			if(data && data.recipient) this.eles.recip.value = data.recipient;

			this.eles.recip.addEventListener('input', function(e) { self.data.recipient = e.target.value; });
			this.eles.doit.addEventListener('click', function() {
				if(self.setError(check(self.data))) return;
				var ret = cb(self.data, false);
				if(ret === true) return self.close();
				self.setError(ret);
			});
			this.eles.nm.addEventListener('click', function() { cb(null, true); self.close(); })
		},

		close: function() {
			if(this.eles) this.eles.exit();
			if(this.dlg) this.dlg.close();
			this.eles = this.dlg = null;
			this.data = {};
		},

		setError: function(err) {
			if(typeof err === 'object' && 'error' in err) {
				err = err.error;
			}
			if(!err) {
				this.eles.err.classList.add('noDisplay');
			} else {
				this.eles.err.innerHTML = err;
				this.eles.err.classList.remove('noDisplay');
			}
			return !!err;
		}
	};

	function Templates() {
		var freq = '<div><span class="royal">Frequency:</span><div id="freq"></div></div>',
			fmt = '<div><span class="royal">Format:</span><div id="fmt"></div></div>',
			email = '<div><span class="royal">Recipient Email:</span><input type="text" id="recip" placeholder="Your Email"></div>',
			err = '<div><span class="hot noDisplay" id="err"></span></div>',
			nm = '<a href="#" id="cancel" class="button grey">Nevermind</a>',
			doit = '<a href="#" id="doit" class="button cool">Schedule</a>';

		this.sched = {
			html: '<div id="schedReporting">' + freq + fmt + email + '</div>' + err + '<footer>' + nm + doit + '</footer>',
			title: 'Schedule Detailed Report'
		};

		this.na =  {html: 'n/a', title: 'n/a'};
	}
	return ReportDialog;
})();

function scheduledReportOpts(uid, cid, type, freq, fmt, email) {
	this.userID = uid;
	this.campaignID = cid;
	this.format = fmt;
	this.type = type;
	this.frequency = freq;
	this.recipient = email;
}