<script lang="ts">
	import icon_list from './icons-list.json';

	let { dialog = $bindable(), onselect }: { dialog?: HTMLDialogElement, onselect?: (text: string) => void } = $props();

	let filter = $state('');
</script>

<dialog bind:this={dialog}>
	<div class="bg-white rounded-lg">
		<div>
			<input class="finput" bind:value={filter} />
		</div>
		<div class="w-[60vw] max-w-[60vw] h-[60vh] max-h-[60vh]">
			<div class="grid grid-flow-row p-3 gap-2 w-[60vw] max-w-[60vw]" style="grid-template-columns: repeat(auto-fit, minmax(62px, 1fr))">
				{#each filter ? icon_list.filter((a) => {
							return a.match(new RegExp(filter, 'ig'));
						}) : icon_list as icon}
					<button
						class="text-violet-500 p-4 text-3xl shadow rounded-lg leading-none min-h-0 w-[62px] h-[62px]"
                        onclick={() => {
                            onselect?.(icon);
                            dialog?.close();
                        }}
					>
						<span class="bi bi-{icon}"> </span>
					</button>
				{/each}
			</div>
			<div class="p-4 w-full"></div>
		</div>
	</div>
</dialog>
