<script lang="ts">
	import MessageSquarePlus from "$icon/message-square-plus";
	import type { KnotOrigin } from "#lib/api/syntax.ts";
	import Reply from "$icon/reply";
	import { type MarkupContext } from "#lib/markup/index.ts";
	import CommentEditor from "#lib/components/comment/CommentEditor.svelte";
	import type { ThreadInput } from "#lib/components/comment/comments.ts";

	interface Props {
		subjectUri: string;
		subjectCid?: string;
		replyToUri?: string;
		replyToCid?: string;
		authorDid: string;
		authorHandle: string;
		markup: MarkupContext;
		knot?: KnotOrigin;
		// "thread" tucks the box into a comment card, matching its canvas background
		variant?: "default" | "thread";
		onsubmitted?: (submitted: ThreadInput) => void;
	}

	let {
		subjectUri,
		subjectCid,
		replyToUri,
		replyToCid,
		authorDid,
		authorHandle,
		markup,
		knot,
		variant = "default",
		onsubmitted
	}: Props = $props();

	const isThread = $derived(variant === "thread");
</script>

{#snippet editor()}
	<CommentEditor
		{subjectUri}
		{subjectCid}
		{replyToUri}
		{replyToCid}
		{authorDid}
		{authorHandle}
		{markup}
		{knot}
		placeholder={isThread
			? "Leave a reply..."
			: "Add to the discussion. Markdown is supported."}
		submitLabel={isThread ? "Reply" : "Comment"}
		submitIcon={isThread ? Reply : MessageSquarePlus}
		compact={isThread}
		layered={!isThread}
		{onsubmitted}
	/>
{/snippet}

{#if isThread}
	<div class="rounded-b-md bg-background-default/50 py-2xs pr-2xs pl-xl">
		{@render editor()}
	</div>
{:else}
	{@render editor()}
{/if}