<script module lang="ts">
	export type Property = {
		name: string;
		type: string;
	};
</script>

<script lang="ts">
	import type { App } from "obsidian";
	import TextInputSuggest, { type Item } from "./TextInputSuggest.svelte";

	type Props = {
		app: App;
		id: string;
		asString?: boolean;
		value?: Property | string;
		accepts?: string[];
		disabled?: boolean;
		onSelected?: (propertyOrName: Property | string) => void;
	};

	let {
		app,
		id,
		asString,
		value = $bindable(),
		accepts,
		disabled,
		onSelected,
	}: Props = $props();

	let items: Item<Property | string>[] = $state([]);

	async function handleChange(query: string) {
		const typesContent = await app.vault.adapter.read(
			app.vault.configDir + "/types.json",
		);
		const types = JSON.parse(typesContent).types as Record<string, string>;

		items = Object.entries(types)
			.filter(([name, type]) => {
				if (accepts && !accepts.includes(type as string)) {
					return false;
				}

				return name.toLowerCase().includes(query.toLowerCase());
			})
			.map(([name, type]) => ({
				text: name,
				value: asString ? name : { name, type },
			}));
	}
</script>

<TextInputSuggest
	{id}
	{items}
	bind:value
	{disabled}
	onChange={handleChange}
	{onSelected}
/>
