<script>import { BEM } from '../../models/BEM';
import FloatIcon from './FloatIcon.svelte';
import Input from './Input.svelte';
import List from './List.svelte';
import MenuAtom from './MenuAtom.svelte';
export let items;
export let value = '';
export let filter = false;
export let optionLabel = 'label';
export let optionGroupChildren = 'items';
export let optionGroupLabel = 'label';
export let overflow = 400;
export let placeholder = 'Search';
export let searchValue = '';
export let filterSarch = ['label'];
export let textNoItems = 'No items';
export let show = true;
const bm = new BEM('UI-ListBox', {});
bm.append($$props.class);
$: _items = filterData(items, filter, filterSarch, searchValue);
function filterData(items, filter, filterSarch, searchValue) {
    if (!filter)
        return items;
    return items.filter((i) => {
        return filterSarch
            .map((it) => i[it].trim().toLowerCase().includes(searchValue.trim().toLowerCase()))
            .includes(true);
    });
}
</script>

<div
	class={bm.toString()}
	style={$$props.style}
	class:overflow
	style:--ui-co-list-box__overflow={`${overflow}px`}
>
	<MenuAtom {show}>
		{#if filter}
			<header>
				<FloatIcon iconRight="fa fa-search">
					<Input {placeholder} bind:value={searchValue} />
				</FloatIcon>
			</header>
		{/if}
		<ul>
			{#if !!_items.length}
				<List
					on:click
					{value}
					items={_items}
					{optionGroupChildren}
					{optionGroupLabel}
					{optionLabel}
				/>
			{:else}
				<p>{textNoItems}</p>
			{/if}
		</ul>
	</MenuAtom>
</div>

<style>.overflow ul {
  overflow: auto;
  max-height: var(--ui-co-list-box__overflow);
}

header {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #dee2e6;
  color: #343a40;
  background: #f8f9fa;
  margin: 0;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}

p {
  padding: 10px;
  margin: 0;
  color: var(--ui-danger);
}</style>
