<script lang="ts">
	import { post, preventDefault } from '$lib/utils';

	let {
		dialog = $bindable(),
		onreload,
		id
	}: { dialog: HTMLDialogElement; onreload: () => void; id: string } = $props();

	let data = $state({
		text: ''
	});

	async function submit() {
		try {
			await post('application/text/flair', {
				id,
				...data
			});
			data.text = '';
			dialog.close();
			onreload();
		} catch (e) {
			// Show message to the user
			console.log(e);
		}
	}
</script>

<dialog class="card" bind:this={dialog}>
	<form onsubmit={preventDefault(submit)}>
		<fieldset>
			<label class="flabel" for="text">Text</label>
			<textarea class="finput min-w-96 min-h-96" id="text" bind:value={data.text}></textarea>
		</fieldset>
		<div class="btns">
			<button type="submit" class="btn-confirm">Extract</button>
		</div>
	</form>
</dialog>
