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

	var template = getTemplate();

	function newSidePanel(d, t, forecast, statement){ return new SidePanel(d, t, forecast, statement); }

	function SidePanel(d, t, forecast, stmnt){
		var statement = !!stmnt ? stmnt : { "availCredits" : 0 },
			e = getElementFromString(render(template, {
				'sidePanel' : getSidePanelArray(d, statement),
				'forecast': forecast
			}));

		t.appendChild(e);

		this.refresh = refresh;

		function refresh(){
			var n = getElementFromString(render(template, {
				'sidePanel' : getSidePanelArray(d, statement),
				'forecast': forecast
			}));
			t.insertBefore(n, e);
			t.removeChild(e);
			e = n;
		}
	}

	function getSidePanelArray(d, statement){ return [getOverviewObj(d, statement), getAppsObj(d)]; }
	function getOverviewObj(d, statement){
		var o = {
			'title' : 'Overview',
			'info' : null
		};

		o.info = getRetargetingOverviewInfo(d, statement);

		return o;
	}

	function getRetargetingOverviewInfo(d, statement){
		return [
			{ 'title' : 'Status', 'value' : d.archived ? 'Archived' : d.active ? 'On' : 'Off' },
			{ 'title' : 'Budget', 'value' : getBudgetWording(d) },
			{ 'title' : 'Pacing Behind', 'value' : getPacingBehind(statement) },
			{ 'title' : 'Schedule', 'value' : d.unrestricted ? 'Always on' : 'Restricted' },
			{ 'title' : 'Type', 'value' : 'Campaign' },
			{ 'title' : 'Segments', 'value' : getOverviewSegments(d) },
			{ 'title' : 'Ad Groups', 'value' : getOverviewAdgroups(d) }
		];
	}

	function getPacingBehind(statement){
		var pb = 0;
		if(isNumber(statement.availCredits)){
			pb = creditsToAmount(statement.availCredits).toFixed(2)
		}

		return  pb > 0 ? '$' + pb : 'N/A'
	}

	function getBudgetWording(d) { return capitalizeN(0, d.budgetType) + ' - $' + (d.budget || 0).toFixed(2); }
	function getOverviewAdgroups(d){ return isDefined(d.adGroups) && d.adGroups.length > 0 ? getNameFromID(d.lists.adGroups, d.adGroups).join(', ') : 'Not selected'; }
	function getOverviewSegments(d){
		var segs = isDefined(d.segments) && d.segments.length > 0 ? d.segments.slice(0) : [];
		if(d.apps.evegment && d.apps.evegment.list) segs.push.apply(segs, d.apps.evegment.list);
		return segs.length ? getNameFromID(d.lists.segments, segs).join(', ') : 'Not selected';
	}

	function getAppsObj(d){
		if(!d.apps) return null;

		var a = d.apps,
			cc = a.contentCategories,
			kw = a.keywords,
			geoV = getGeo('geography'),
			exGeoV = getGeo('excludeGeography'),
			ccV = getCC(),
			o = { 'title' : 'Apps','info' : [] };

		if(!!geoV) o.info.push(new PanelInfoItem('Geography', geoV));
		if(!!exGeoV) o.info.push(new PanelInfoItem('Exclude Geography', exGeoV));
		if(!!ccV) o.info.push(new PanelInfoItem('Content Category', ccV));
		if(!!kw && !!kw.status) o.info.push(new PanelInfoItem('# of Keywords', kw.list.length));

		return o.info.length ? o : null;

		function getGeo(k){
			var geo = a[k];
			if(!geo || !Object.keys(geo).length){
				return null;
			}
			if (!geo.status) return 'All USA, All Canada';
			if(geo.targeting !== 'Specific Location') return geo.targeting;
			var out = [];
			if(geo.cities && geo.cities.length) out.push({title: 'Cities', value: geo.cities.join(', ')});
			if(geo.zipCodes && geo.zipCodes.length) out.push({title:'Zip Codes', value: geo.zipCodes.join(', ')});
			if(geo.states && geo.states.length) out.push({title: 'States', value: geo.states.join(', ')});
			if(geo.dmas && geo.dmas.length) out.push({title: 'DMAs', value: geo.dmas.join(', ')});
			return out.length ? out : 'Specific Location';
		}

		function getCC(){
			if(!cc){
				return null
			} else if(!!cc.status && !!cc.titles && !!cc.titles.length){
				return cc.titles.join(', ')
			}

			return 'Not selected'
		}
	}

	function PanelInfoItem(ttl, val){
		this.title = ttl;
		if(isArray(val)) {
			this.list = val;
			this.hasList = true;
		} else {
			this.value = val;
		}
	}

	function getTemplate(){
		var h = '<h2>{{ title }}:</h2>',
			list = '{{# hasList }}<ul>{{# list }}<li>{{ title }}: {{ value }}</li>{{/ list }}</ul>{{/ hasList }}',
			span = '{{^ hasList }}<span>{{ value }}</span>{{/ hasList }}',
			info = '<info>{{# info }}<p><b>{{ title }}:</b>' + span + list + '</p>{{/ info }}</info>',
			forecast = '<section class="forecast"><h3>Your filters are limiting your campaign by:</h3><perc class="fresh">{{ forecast }}%</perc> <a href="https://www.youtube.com/c/MeteoraAdvertising" target="_blank">Training [Videos]</a></section>';
		return '<side-panel>{{# sidePanel }}<section>' + h + info + '</section>{{/ sidePanel }}{{# forecast }}' + forecast + '{{/ forecast }}</side-panel>';
	}

	function getNameFromID(list, d){
		const a = [];

		loop(d, p);
		return a;

		function p(k, v){
			var id = v;
			loop(list, m);

			function m(k, v){
				if(v.id == id){
					// Right now, segments uses v.label while ad groups uses v.data.name.
					// I'd like to transition to the v.label structure eventually (See the Segment type in segments.js)
					a.push(v.label || (v.data ? v.data.name : v.id));
					return true;
				}
			}
		}
	}

	return newSidePanel;
})();