<script lang="ts">
	import { createEventDispatcher } from "svelte";


	export let values: Array<string|object>

	export let viewField: string|null = null;
	export let onchoose: Function|null = null;
	// export let valueField: string = null;
	
	export let startText: string = '';
	let activeIndex = 0;
	let chosen = false;

	const dispatch = createEventDispatcher()

	if (typeof values === 'object' && !viewField){
		console.warn('Specify viewField prop to AutoSelect');		
	}

	$: visibleValues = startText.length > 0 
		? values.filter(w => (typeof w == 'string' ? w : w[viewField]).toLowerCase().startsWith(startText.toLowerCase()))
		: [];


	function navigate(event:KeyboardEvent) {
		
		// let activeItem = dataList.querySelector('.item.active');

		if (event.key === 'ArrowDown'){
			if (activeIndex < visibleValues.length - 1) activeIndex++;		
			event.preventDefault()
		}
		else if(event.key == 'ArrowUp'){
			if (activeIndex) activeIndex--;
			event.preventDefault()
		}
		else if(event.key == 'Enter'){
			chooseItem()			
			return;
		}
		else{
			setTimeout(() => {
				if (activeIndex >= visibleValues.length) activeIndex = visibleValues.length - 1;
			})			
		}

		chosen = false;

	}

	function chooseItem(index?:number) {
		chosen = true;

			activeIndex = index || activeIndex;

			let chosenText = viewField ? visibleValues[activeIndex][viewField] : visibleValues[activeIndex]
			const callbackObject = {
				value: chosenText, index: activeIndex, target: visibleValues[activeIndex]
			}
			
			onchoose && onchoose(callbackObject)
			dispatch('choose', callbackObject)

			startText = chosenText;		
	}

	let onHover = (i: number) => activeIndex = i;

</script>

<div class="container">
	<input type="text" bind:value={startText} on:keydown={navigate} >	

	{#if !chosen}
		<div class:autocomplete={visibleValues.length}>
			{#each visibleValues.slice(0, 10) as value, i}
				<div class="item" class:active={activeIndex == i} on:click={() => chooseItem(i)} on:mouseenter={
					() => onHover(i)
				}>
					{viewField ? value[viewField] : value}
				</div>
			{/each}
		</div>			
	{/if}

</div>

<style lang="less">
	.autocomplete{
		position: absolute;
		background-color: white;
		border: 1px solid gray;
		width: 100%;		
	}
	input{
		width: calc(100% - 0.5em);
	}
	.item{
		padding: 2px 5px;
		cursor: pointer;
		// &:hover{
		// 	background-color: lightgray;
		// }
		&.active{
			background-color: darkgray;
		}
	}	
</style>