var searchRetargeting = (function(){
	'use strict'

	var template = getTemplate();

	return newSearchRetargeting;

	function newSearchRetargeting(d, t, uf){ return new SearchRetargeting(d, t, uf); }

	function SearchRetargeting(d, t, fns){
		populateMissing(d);
		var e = getElementFromString(template, fns.getAppName('searchRetargeting')),
			ele = new Elements(e, {
				'status' : { 'target' : new ToggleInput(e.querySelector('.tgl'), updateStatus, {
					'initialValue' : d.status === true })
				},
				"remove" : { 'target' : new ConfirmationButton(e.querySelector('.remove'), {
					'text' : 'Remove app',
					'noClass' : true,
					'confirmText' : 'Confirm?'
				}, removeAction) },
				'kws' : { 'target' : new TagContainer(e.querySelector('.inputs'), { 'limit' : 2000, 'data' : d.list }, updateSearchRetargeting) },
				'negkws' : { 'target' : new TagContainer(e.querySelector('.negInputs'), { 'limit' : 2000, 'data' : d.negatives }, updateNegSearchRetargeting) },
			});

		this.show = function(){ e.classList.remove('noDisplay'); };
		this.hide = function(){ e.classList.add('noDisplay'); };
		this.exit = function(){
			if(!!e) removeChild(t, e);
			if(!!ele) ele.exit();
			e = ele = null;
		};

		t.appendChild(e);

		function updateStatus(v){
			d.status = v;
			if(!v){
				d.list = d.negatives = [];
				e.querySelector('.searchRetargeting').classList.add('noDisplay');
			} else {
				e.querySelector('.searchRetargeting').classList.remove('noDisplay');
			}

			fns.refreshSidePanel();
		}

		function updateSearchRetargeting(e){ d.list = sanitize(e); fns.refreshSidePanel(); }
		function updateNegSearchRetargeting(e){ d.negatives = sanitize(e); fns.refreshSidePanel(); }
		function removeAction(e){ fns.removeApp('searchRetargeting'); }
	}

	function getTemplate(){
		var span = '<span>If a user enters a phrase or keyword into any major search engine, blog search, or other search bar on the web we will target them if their search matches any of the keywords listed below:</span>',
			note = '<div class="searchRetargetingNote"><p>*Note: You can have a max of 2000 keywords</p></div>',
			inputs = '<div class="inputs inputsRow"><h5>Include:</h5></div>',
			negInputs = '<div class="negInputs inputsRow"><h5>Exclude:</h5></div>',
			kw = '<div class="searchRetargeting">' + span + inputs + negInputs + note + '</div>',
			h = '<h3 class="medium">{{ . }}:</h3>',
			tgl = '<div class="tgl"></div>',
			rem = '<div class="remove"></div>';

		return '<row class="searchRetargetingRow">' + h + tgl + rem + kw + '</row>';
	}

	function sanitize(e){
		var a = [];
		loop(e, p);
		return a;

		function p(_, v){ a.push(v.toLowerCase()); }
	}

	function populateMissing(d){
		if(!isDefined(d.list)){
			d.list = [];
		}

		if(!isDefined(d.negatives)){
			d.negatives = [];
		}
	}
})();