<script lang="ts">
import { untrack } from 'svelte';
import MentionDropdown from './MentionDropdown.svelte';
import type { components } from '$lib/generated/api';

type Person = components['schemas']['Person'];
type DropdownState = {
	items: Person[];
	command: (item: Person) => void;
	clientRect: (() => DOMRect | null) | null;
};

type Props = {
	model: DropdownState;
	initialEditorQuery: string;
	/** Test hook: receives a setter for editorQuery so the test can mutate it. */
	onReady?: (setEditorQuery: (q: string) => void) => void;
	onSearch?: (q: string) => void;
};

let { model, initialEditorQuery, onReady, onSearch = () => {} }: Props = $props();

let editorQuery = $state(untrack(() => initialEditorQuery));

$effect(() => {
	onReady?.((q) => {
		editorQuery = q;
	});
});
</script>

<MentionDropdown model={model} editorQuery={editorQuery} onSearch={onSearch} />
