<script>
	import Dropdown from "$shared/components/dropdown.svelte";
	import {generate_random_hex_color} from "$shared/lib/colors";
	import {uuid_v4} from "$shared/lib/helpers";

	let entries = [];

	let dropdown;

	for (let i = 1; i < 20; i++) {
		entries.push({
			id: uuid_v4(),
			name: "Option " + i,
			selected: false,
			color: generate_random_hex_color(true)
		});
	}

	function on_create({detail}) {
		const copy = entries;
		const entry = {id: uuid_v4(), name: detail.name};
		copy.push(entry);
		entries = copy;
		console.log("Created", entry);
		dropdown.select_entry(entry.id);
	}

	function on_select({detail}) {
		console.log(detail);
	}
</script>

<main class="grid gap-y-lg padding-md">
    <div class="row">
        <label for="dropdown">Choose an entry</label>
        <Dropdown id="dropdown"
                  name="dropdown"
                  placeholder="Search or create"
                  maxlength="50"
                  creatable="true"
                  multiple="false"
                  {entries}
                  bind:this={dropdown}
                  on:create={on_create}
                  on:select={on_select}
        />
    </div>
</main>
