//	Specific targeting app
//	===============================================
//	Takes in data obj, an element to append to, and utility functions
//
//	Data set:
//	- inventory []string
//	- devices []string
//	- browsers []string
//	- exchanges []string
//
//	Example data:
//	{
//		"inventory": [
//			"desktop",
//			"mobile native",
//			"mobile web"
//		],
//		"devices": [
//			"windows",
//			"macintosh",
//			"iphone",
//			"ipod",
//			"webos",
//			"linux",
//			"blackberry"
//		],
//		"browsers": [
//			"safari",
//			"internet explorer",
//			"firefox"
//		],
//		"exchanges": [
//			"centro",
//			"rubicon",
//			"google",
//			"pubmatic",
//			"casale"
//		]
//	}
//
var specificTargeting = (function(){
	'use strict'

	var template = new Template,
		exArr = ['Adx','casale'],
		exTitleArr = ['Adx','Casale'],
		invArr = ['desktop', 'mobile native', 'mobile app', 'mobile web'],
		invTitleArr = ['Desktop', 'Mobile Native', 'Mobile App', 'Mobile Web'],
		devArr = ['windows','macintosh','iphone','ipod','ipad','webos','linux','blackberry'],
		devTitleArr = ['Windows', 'Macintosh', 'iPhone', 'iPod', 'iPad', 'webOS', 'Linux', 'Blackberry'],
		browsArr = ['chrome','safari','internet explorer','firefox'],
		browsTitleArr = ['Chrome', 'Safari', 'Internet Explorer', 'Firefox'];

	return newSpecificTargeting;

	function newSpecificTargeting(d, t, fns){ return new SpecificTargeting(d, t, fns); }

	function SpecificTargeting(d, t, fns) {
		// If you update this list, make sure to update getBiddingAgentList in API
		var data = [
			new TargetingItem('Exchanges', createValues(exTitleArr), updateExchanges, exArr),
			new TargetingItem('Inventory', createValues(invTitleArr), updateInventory, invArr),
			new TargetingItem('Devices', createValues(devTitleArr), updateDevices, devArr),
			new TargetingItem( 'Browsers', createValues(browsTitleArr), updateBrowsers, browsArr)
		],
		e = getElementFromString(template.index, fns.getAppName('specificTargeting')),
		eV = e.querySelector('.view'),
		eles = new Elements(e, {
			"status" : {},
			"remove" : { 'target' : new ConfirmationButton(e.querySelector('.remove'), {
				'text' : 'Remove app',
				'noClass' : true,
				'confirmText' : 'Confirm?'
			}, removeAction) },
		});

		this.exit = exit;

		setEles();
		t.appendChild(e);

		function updateStatus(e) {
			d.status = e;
			if(e){
				eV.classList.remove('noDisplay');
			} else {
				eV.classList.add('noDisplay');
				data.forEach(function(list){
					d[list.name] = null;
					eles[list.name].setSelectedByValue(list.defaults);
				});
			}
		}

		function updateExchanges(e, ms) { d.exchanges = getValue(ms); }
		function updateInventory(e, ms) { d.inventory = getValue(ms); }
		function updateDevices(e, ms) { d.devices = getValue(ms); }
		function updateBrowsers(e, ms) { d.browsers = getValue(ms); }
		function removeAction(e){ fns.removeApp('specificTargeting'); }

		function createValues(arr){
			var a = [];
			loop(arr, p);
			return a;
			function p(k, v){ a[k] = new Value(v); }
		}
		function getValue(ms) { return ms.getSelected().map(function(e) { return e.value; }); }

		function setEles(){
			var isSelected = false,
				isSelectedEx = false;

			loop(data, set);
			eles.status = new ToggleInput(e.querySelector('.toggle'), updateStatus, { 'initialValue' : d.status === true });

			function set(k, v){
				var row  = getElementFromString(render(template.selectRow, v)),
					sel = d[v.name];

				eles[v.name] = new MultiSelect(row.querySelector('div'), v.cb, { "selected" : sel || v.defaults })
				eV.appendChild(row);
			}
		}

		function exit(){
			if(!!e) removeChild(t, e);
			if(!!eles) eles.exit();
			e = eles = eV = null;
		}
	};

	function TargetingItem(t, itms, cb, dflts){
		this.name = t.toLowerCase();
		this.title = t;
		this.items = itms;
		this.cb = cb;
		this.defaults = dflts;
	}

	function Value(v){
		this.title = v;
		this.value = v.toLowerCase();
	}

	function Template(){
		var select = '<div><select name="{{name}}">{{#items}}<option value="{{value}}">{{title}}</option>{{/items}}</select></div>';
		this.index = '<row><h3 class="medium">{{ name }}</h3><div class="toggle"></div><div class="remove"></div><div class="view"></div></row>';
		this.selectRow = '<row class="wideTitle {{name}}"><h3>{{title}}</h3>' + select + '</row>';
	}
})();