<script lang="ts">
	import type { MenuItem } from '$lib/menubar/buttonlib';

	interface Props {
		menu: MenuItem[];
	}
	let { menu }: Props = $props();

	function key(e: KeyboardEvent) {
		let k = e.key;
		for (let menuItem of menu) {
			if (k === menuItem.keyboard) {
				menuItem.action();
				return;
			}
		}
	}
</script>

<svelte:window onkeydown={key} />

{#each menu as menuItem}
	{#if menuItem.visible}
		{@const index = menuItem.display.indexOf(menuItem.keyboard)}
		<button disabled={menuItem.disabled} onclick={menuItem.action}>
			{#if index !== -1}
				{menuItem.display.substring(0, index)}<u>{menuItem.display.charAt(index)}</u
				>{menuItem.display.substring(index + 1)}
			{:else}
				{menuItem.display} (<u>{menuItem.keyboard}</u>)
			{/if}
		</button>
	{/if}
{/each}

<style>
	button {
		box-sizing: border-box;
		border: 2px inset darkgreen;
		padding: var(--size-1) var(--size-3);
		background-color: green;
		color: #fff;
		cursor: pointer;
	}
	button[disabled] {
		background-color: darkgreen;
		color: green;
		cursor: not-allowed;
	}
</style>