<script lang="ts">
	import { getAuth } from "#lib/auth.svelte.ts";
	import type { KnotOrigin } from "#lib/api/syntax.ts";
	import CommentBox from "#lib/components/comment/CommentBox.svelte";
	import CommentList from "#lib/components/comment/CommentList.svelte";
	import OlderComments from "#lib/components/comment/OlderComments.svelte";
	import SignupPrompt from "#lib/components/ui/SignupPrompt.svelte";
	import {
		threadsOf,
		withComment,
		withEdited,
		withOlderPage,
		withRemoved,
		type CommentPage,
		type ThreadInput
	} from "#lib/components/comment/comments.ts";
	import type { MarkupContext } from "#lib/markup/paths.ts";

	interface Props {
		comments: CommentPage;
		subjectUri: string;
		subjectCid?: string;
		markup: MarkupContext;
		knot?: KnotOrigin;
		bobbinUrl?: string;
		class?: string;
	}

	let {
		comments = $bindable(),
		subjectUri,
		subjectCid,
		markup,
		knot,
		bobbinUrl,
		class: className = ""
	}: Props = $props();

	const auth = getAuth();

	const threads = $derived(threadsOf(comments));
	const onsubmitted = (submitted: ThreadInput) => {
		comments = withComment(comments, submitted);
	};
	const onedited = (edited: ThreadInput) => {
		comments = withEdited(comments, edited);
	};
	const ondeleted = (uri: string) => {
		comments = withRemoved(comments, uri);
	};
</script>

<div class={["flex flex-col gap-md", className]}>
	<OlderComments
		{subjectUri}
		cursor={comments.cursor}
		{bobbinUrl}
		onpage={(page) => (comments = withOlderPage(comments, page))}
	/>
	<CommentList
		{threads}
		{subjectUri}
		{subjectCid}
		{markup}
		{knot}
		{onsubmitted}
		{onedited}
		{ondeleted}
	/>

	{#if auth.currentDid}
		<CommentBox
			{subjectUri}
			{subjectCid}
			authorDid={auth.currentDid}
			authorHandle={auth.currentUser?.handle ?? ""}
			{markup}
			{knot}
			{onsubmitted}
		/>
	{:else}
		<SignupPrompt />
	{/if}
</div>