<script lang="ts">
	import { untrack } from "svelte";
	import CommentList from "#lib/components/comment/CommentList.svelte";
	import type { CommentThread, CommentView } from "#lib/components/comment/comments.ts";
	import type { MarkupContext } from "#lib/markup/index.ts";
	import Button from "#lib/components/ui/Button.svelte";

	interface Props {
		threads: CommentThread[];
		subjectUri: string;
		subjectCid?: string;
		markup: MarkupContext;
		create: (n: number) => CommentView;
	}

	let { threads: initial, subjectUri, subjectCid, markup, create }: Props = $props();

	let threads = $state(untrack(() => initial));
	let count = 0;

	const add = (replyTo: string | null) => {
		count += 1;
		const comment = create(count);
		threads =
			replyTo === null
				? [...threads, { self: comment, replies: [] }]
				: threads.map((thread) =>
						thread.self.uri === replyTo
							? { ...thread, replies: [...thread.replies, comment] }
							: thread
					);
	};
</script>

<div class="flex flex-col gap-md">
	<div class="flex gap-xs">
		<Button onclick={() => add(null)}>Add comment</Button>
		{#each threads as thread, i (thread.self.uri)}
			<Button onclick={() => add(thread.self.uri)}>Reply to thread {i + 1}</Button>
		{/each}
	</div>
	<div data-testid="arrival-list" class="flex flex-col gap-md">
		<CommentList {threads} {subjectUri} {subjectCid} {markup} />
		<div data-testid="arrival-end" class="h-8 rounded-md bg-background-subtle"></div>
	</div>
</div>