<script>
	//import { setFilter, getFilter } from './filters';

	// default selectAll value
	let selectAll = true;
	export let tabindex = 0;
	export let context = 'none';
	export let filterValues;
	export let histogram; // an array with key = filter value, val = number of technologies
	export let colours = false; // an array of colour values with
	//console.log('Filterable contextFilter: ', filterValues);
	export let colour_type = 'circle';
	let activeFiltersString = 'None';

	//
	// printing output for filter
	let isActive = [];
	let filterText = 'none';

	const formatter = new Intl.ListFormat('en', {
	  style: 'long',
	  type: 'conjunction',
	});

	function joinActive(isActive) {
		//console.log('joinActive');
		//console.log('filterValues: ', filterValues);
		if (isActive.length) return formatter.format(isActive);
		return 'No';
	}

	function getActive($f) {
		let isActive = [];
		//console.log('getActive type for filterValues: ', filterValues.constructor);
		// use the global (to this component) variable
		$f.forEach(function(filter, index) {
			if (filter.active) {
				isActive = [...isActive, filter.name];
			}
 		});
		return isActive;
	}

	// active is an array of active filter filterValues
	export function filterVerbage(active) {
		//console.log('l = ', active.length);
		if (active.length == 1) return 'filter is';
		else return 'filters are';
	}

	//
	// managing filter values
	function updateFilterValues(filter) {
		//console.log('filter ('+ filter.id + ') has state ' + filter.active + '...');
		$filterValues.forEach(function(b, i) {
			//console.log('b: ', b);
			if (b.id == filter.id) { $filterValues[i].active = filter.active; }
		})
		return filterValues;
	}

	function allNoneActive() {
		selectAll = !selectAll;
		$filterValues.forEach(function(b, i) { $filterValues[i].active = selectAll; });
	}

	function invertActive() {
		$filterValues.forEach(function(b, i) {
			$filterValues[i].active = !$filterValues[i].active;
		});
	}

	$: {
		//console.log('doh! ', $filterValues);
		isActive = getActive($filterValues);
		activeFiltersString = joinActive(isActive);
		filterText = filterVerbage(isActive);
		//if (colours) { console.log('we have colours! ', colours); }
	}

	//console.log('histogram: ', histogram);
</script>

<slot name="title"><h2>Test Array</h2></slot>
<slot name="description"><p>Test Description</p></slot>
<div class="actions">
	<span class="allNone" role="button" tabindex={tabindex++} on:click={() => allNoneActive()}
		on:keypress={() => allNoneActive()}>select all/none</span><wbr/>
	<span class="invert" role="button" tabindex={tabindex++} on:click={() => invertActive()}
		on:keypress={() => invertActive()}>invert selection</span>
</div>
<div class='container'>
{#each $filterValues as filter (filter.id)}
	<span class="filter {context}" class:active={filter.active}
		on:click="{() => { filter.active = !filter.active; updateFilterValues(filter);}}"
		on:keypress="{() => {filter.active = !filter.active; updateFilterValues(filter);}}"
		name="{filter.id}" role="button" tabindex={tabindex + filter.id}>{filter.name}{#if (histogram[filter.name] > 1) }<span class='histogram' title="There are {histogram[filter.name]} webservices in this category">&nbsp;({histogram[filter.name]})</span>{/if}{#if
		(colours && colour_type == 'circle')}<span class='circle' style="background-color: {colours[filter.name].colour}"></span>{/if}</span><wbr/>
{/each}
</div>

<!--<p>{activeFiltersString} {filterText} active.</p>-->

<style>
	h2 {
	  margin-bottom: 0.2em;
	  color: #444;
	}
	.actions {
		display: inline;
		color: #444;
		/*width: 100%;*/
		background-color: #eee;
		border: 1px solid #ddd;
		padding: 4px 8px;
	}
	.actions span {
		font-size: 90%;
		margin-right: 1em;
		margin-bottom: 1em;
		cursor: pointer;
	}
	.actions span:hover { color: #000; }
	.actions span:last { margin-right: 0px; }
	.container {
		line-height: 1.5em;
		width:  90%;
		padding: 1em 0 0 0;
		margin-bottom: 20px;
	}
	.filter {
		font-size: 80%;
		width: 80px;
		height: auto;
		border: 1px #aaa solid;
		background-color: #eee;
		padding: 10px;
		box-shadow: 4px 4px 3px #aaa;
		border-radius: 6px;
		cursor: pointer;
		white-space: nowrap;
		word-break: normal;
		margin: 1.5em 1em 2em 0;
	}
/*	.filter:hover {
		box-shadow: 6px 6px 5px #aaa;
		border-color: #222;
	}
	.active {
		background-color: lightblue;
	} */

	/* instance-specific styles */
	.filter {
		font-size: 0.8em;
		margin-right: 0.5em;
		line-height: 2.5;
		padding: 6px 8px;
		border-radius: 10px;
		white-space: nowrap;
		word-break: normal;
		box-shadow: 3px 3px 3px #6a6d6a;
		color: #888;
	}
	.filter:hover { box-shadow: 6px 6px 5px #aaa; color: #000; }
	.filter:active { box-shadow: 0px 0px 3px #727372; color: #fff;}
	.filter.categories.active {
		background-color: #9aa34d;
		color: #eee;
	}
	.filter.analogues.active {
		background-color: #a34b62;
		color: #eee;
	}
	.filter.licenses.active {
		background-color: #6498a3;
		color: #eee;
	}
	.filter.statuses.active {
		background-color: #a369a2;
		color: #eee;
	}
	.filter.affiliates.active {
		background-color: #fff;
		color: #000;
	}
	.filter.hosts.active {
		background-color: #fff;
		color: #000;
	}
	.filter .histogram {
		color: #aaa;
	}
	.circle {
		vertical-align: middle;
		margin-left: 4px;
		height: 20px;
		width: 20px;
		background-color: #555;
		border: 1px solid #555;
		border-radius: 50%;
		display: inline-block;
		opacity: .2;
	}
	.active .circle {
		opacity: 1;
	}
</style>
