<script lang="ts">
	import { z, mutators } from '$lib/zero.svelte';
	import { queries } from '../schema.js';

	// Create a query using defineQuery
	const todos = z.createQuery(queries.todo.all());

	const randID = () => Math.random().toString(36).slice(2);

	function onsubmit(event: Event) {
		event.preventDefault();
		const formData = new FormData(event.target as HTMLFormElement);
		const title = formData.get('title') as string;
		if (title) {
			// Mutations use the mutators pattern
			z.mutate(mutators.todo.insert({ id: randID(), title, completed: false, type_id: '' }));
			(event.target as HTMLFormElement).reset();
		}
	}

	function toggleTodo(id: string, completed: boolean) {
		z.mutate(mutators.todo.update({ id, completed }));
	}
</script>

<form {onsubmit}>
	<input type="text" name="title" />
	<button type="submit">Add</button>
</form>

<ul>
	{#each todos.data as todo (todo.id)}
		<li>
			<input
				type="checkbox"
				checked={todo.completed}
				oninput={() => toggleTodo(todo.id, !todo.completed)}
			/>
			{todo.title} - {todo.type?.name}
		</li>
	{/each}
</ul>

<script lang="ts">
	import { z } from '$lib/zero.svelte';
	import { queries } from '../schema.js';

	let showCompleted = $state(false);

	// Query recreates when showCompleted changes
	const filtered = $derived(z.createQuery(queries.todo.byCompleted({ completed: showCompleted })));
</script>

<label>
	<input type="checkbox" bind:checked={showCompleted} />
	Show completed only
</label>

{#each filtered.data as todo (todo.id)}
	<div>{todo.title}</div>
{/each}

<script lang="ts">
	import { z } from '$lib/zero.svelte';
	import { zql } from '../schema.js';

	let searchText = $state('');

	// Filters data already synced - no server round-trip per keystroke
	const searchResults = $derived.by(() => {
		let q = zql.todo.related('type');
		if (searchText) {
			q = q.where('title', 'ILIKE', `%${searchText}%`);
		}
		return z.createQuery(q);
	});
</script>

<input type="text" placeholder="Search..." bind:value={searchText} />

{#each searchResults.data as todo (todo.id)}
	<div>{todo.title}</div>
{/each}

<script lang="ts">
	import { z } from '$lib/zero.svelte';
</script>

<!-- States: connecting | connected | disconnected | needs-auth | error | closed -->
{#if z.connectionState.name === 'connected'}
	<span>Connected</span>
{:else if z.connectionState.name === 'connecting'}
	<span>Connecting...</span>
{:else if z.connectionState.name === 'disconnected'}
	<span>Disconnected: {z.connectionState.reason}</span>
{:else if z.connectionState.name === 'needs-auth'}
	<span>
		Auth Required
		<button onclick={() => z.connection.connect()}>Retry</button>
	</span>
{:else if z.connectionState.name === 'error'}
	<span>
		Error: {z.connectionState.reason}
		<button onclick={() => z.connection.connect()}>Retry</button>
	</span>
{:else if z.connectionState.name === 'closed'}
	<span>Closed</span>
{/if}

<script lang="ts">
	import { z } from '$lib/zero.svelte';
	import { queries } from '../schema.js';

	let enabled = $state(true);

	// Query won't materialize until enabled is true
	const todos = $derived(z.createQuery(queries.todo.all(), enabled));
</script>

<label>
	<input type="checkbox" bind:checked={enabled} />
	Enable query
</label>

<script lang="ts">
	import { z } from '$lib/zero.svelte';
	import { zql } from '../schema.js';

	const todos = z.createQuery(zql.todo.related('type'));

	function applyFilter(typeId: string | undefined) {
		const q = typeId
			? zql.todo.where('type_id', '=', typeId).related('type')
			: zql.todo.related('type');
		todos.updateQuery(q);
	}
</script>