//	Events app
//	===============================================
//	Takes in data obj, an element to append to, and utility functions
//
//	Data set:
//	- title    string // the keyword used to get this result
//	- when      byte // +/- period
//	- radius     float64
//	- period     uint8
//	- locations  []Location
//
//	Location set:
//	- name     string
//	- date     string
//	- location string // location name for display
//	- coords   []Coord
//
//	Coord set:
//	- lat  float64
//	- lng  float64
//
//	Example data:
//	{
//		"radius": 1,
//		"period": 1,
//		"locations": [
//			{
//				"name": "starbucks",
//				"color": "#1abc9c",
//				"coords": [
//					{ "lat": 47.613957, "lng": -122.32817999999997 },
//					{ "lat": 47.610092, "lng": -122.34261100000003 },
//					{ "lat": 47.619401, "lng": -122.32505400000002 }
//				]
//			}
//		]
//	}
//
var events = (function(){
	'use strict'

	var template = getTemplate(),
		radiusOpts = [
			{ 'title' : '1 mile', 'value' : 0 },
			{ 'title' : '5 miles', 'value' : 5 },
			{ 'title' : '10 miles', 'value' : 10 },
			{ 'title' : '15 miles', 'value' : 15 },
			{ 'title' : '20 miles', 'value' : 20 },
			{ 'title' : '35 miles', 'value' : 35 },
			{ 'title' : '50 miles', 'value' : 50 }
		],
		periodOpts = getPeriodOpts(); // what a bloody mess

	function newEvents(d, t, fns){ return new Events(d, t, fns); }

	function Events(d, t, fns){
		var dc = getSimpleJSONCopy(d);
		dc.name = fns.getAppName('events');
		var evt = new EventManager(),
			e = getElementFromString(template, dc),
			row = new ToggleRow(e, updateToggle, {
				'status' : d.status,
				'headerClass' : 'medium',
				'removeAppFn' : removeAction
			}),
			eles = new Elements(e, {
				'status' : { 'target' : row },
				'title' : { 'target' : row.qS('input') },
				'radius' : { 'target' : new Dropdown(row.qS('.etRadius'), new DropdownObj(radiusOpts, d.radius || 20), getInputSetter(d, 'radius', parseInt)) },
				'period' : { 'target' : new Dropdown(row.qS('.etPeriod'), new DropdownObj(periodOpts, d.period || 10), updateSearch) },
				'result' : { 'selector' : '.etResult' },
				'resultTbl' : {}
			}),
			results;

		eles.title.value = d.title || '';
		if(d.locations) initTable(d.locations);

		evt.add(eles.title, 'change', updateSearch);

		t.appendChild(e);

		this.exit = exit;

		function updateToggle(e) {
			d.status = e;
			if(!e) { d.radius = d.period = null; }
		}

		function updateSearch(){
			if(!eles || !eles.title) return;
			d.title = eles.title.value.trim();
			d.period = parseInt(eles.period.get());

			if(!d.title.length) return;
			new HttpRequest('GET', '/api/v1/eventSearch/' + d.title.replace('/', ' ') + '/' + d.period + '/+', null, null, 'json',  updateResult);
		}


		function updateResult(data, err) { if(err !== 200) return console.error(err); d.locations = data; initTable(data); }

		function exit(){ if(!!e) removeChild(t, e); if(!!eles) eles.exit(); if(!!evt) evt.reset(); row.exit(); housekeeping(); }
		function housekeeping(){ e = eles = evt = row = null; }
		function removeAction(e){ fns.removeApp('events'); }

		function initTable(locations) {
			if(!eles) return;
			if(eles.result && eles.result.exit) eles.result.exit();
			var resultOpts = {
				rowSelect: false,
				maxPerPage: 10,
				columns: {
					'name': {key: 'name', sortable: true, title: 'Event', valueType: 'string', width: 276},
					'date': {key: 'date', sortable: true, title: 'Date (UTC)', valueType: 'string', width: 110},
					'location': {key: 'location', sortable: true, title: 'Location', valueType: 'string', width: 140}
				},
			};

			resultOpts.rows = locations;
			eles.result.classList.remove('noDisplay');
			eles.resultTbl = NewMTable(eles.result.querySelector('div'), resultOpts);
		}
	};

	function getTemplate(){
		// I want to target: {{Input field for event string search}} events {{number of days dropdown}} days before they occur. Targeting people within {{number of miles dropdown}} miles around each event center.
		var h = '<h3 class="medium">{{ name }}:</h3>',
			target = '<div><span class="bright">I want to target:</span> <input type="text" placeholder="Cowboys football" value="{{ title }}" /> <span class="bright">events.</span></div>',
			period = '<div class="opts" title="The maximum number of days from today at which you would consider an event targetable."><span class="bright">Event date Range:</span> <div class="etPeriod"></div></div>',
			radius = '<div class="opts" title="The radius (in miles) around the event venue in which you want to target users in."><span class="bright">Venue radius size :</span> <div class="etRadius"></div></div>',
			results = '<div class="etResult noDisplay"><span class="bright">Sample targeted events:</span><div></div></div>',
			opt = '<div class="toggle"></div><div class="remove"></div>';

		return '<row class="events">' + h + opt + '<div class="view">' + target + period + radius + results + '</row>';
	}

	function getPeriodOpts() {
		var opts = [
			{ 'title' : '0 days', 'value' : 0 },
			{ 'title' : '1 day', 'value' : 1 }
		];
		for(var i = 2; i < 31; i++) {
			opts.push({ 'title' : i + ' days', 'value' : i });
		}
		return opts;
	}

	return newEvents;
})();