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

type PersonMention = components['schemas']['PersonMention'];

type Props = {
	initialValue?: string;
	initialMentions?: PersonMention[];
	placeholder?: string;
	disabled?: boolean;
	onChange: (snapshot: { value: string; mentionedPersons: PersonMention[] }) => void;
};

let {
	initialValue = '',
	initialMentions = [],
	placeholder,
	disabled = false,
	onChange
}: Props = $props();

// initial* props seed mount-time state; reading them inside untrack signals
// the intentional one-shot capture and silences state_referenced_locally.
let value = $state(untrack(() => initialValue));
let mentionedPersons = $state<PersonMention[]>(untrack(() => [...initialMentions]));

$effect(() => {
	onChange({ value, mentionedPersons: [...mentionedPersons] });
});
</script>

<PersonMentionEditor
	bind:value={value}
	bind:mentionedPersons={mentionedPersons}
	placeholder={placeholder}
	disabled={disabled}
/>
