<script lang="ts">
	import MessageSquarePlus from "$icon/message-square-plus";
	import Reply from "$icon/reply";
	import Avatar from "$lib/components/ui/Avatar.svelte";
	import User from "$lib/components/ui/User.svelte";
	import { type MarkupContext } from "$lib/markup";
	import CommentEditor from "./CommentEditor.svelte";
	import type { ThreadInput } from "./comments";

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

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

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

{#snippet editor()}
	<CommentEditor
		{subjectUri}
		{subjectCid}
		{replyToUri}
		{replyToCid}
		{authorDid}
		{authorHandle}
		{markup}
		rows={isThread ? 4 : 6}
		placeholder={isThread
			? "Write a reply. Markdown is supported."
			: "Add to the discussion. Markdown is supported."}
		submitLabel={isThread ? "Reply" : "Comment"}
		submitIcon={isThread ? Reply : MessageSquarePlus}
		{autofocus}
		{onsubmitted}
		{oncancel}
	/>
{/snippet}

{#if isThread}
	<!-- two-column, mirroring Comment: avatar left, handle + editor right -->
	<div class="flex gap-2 bg-background-default/50 px-6 py-3">
		<div class="shrink-0">
			<Avatar did={authorDid} handle={authorHandle} size="large" />
		</div>
		<div class="flex min-w-0 flex-1 flex-col gap-2">
			<div class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-subtle">
				<span class="text-foreground-default">{authorHandle}</span>
			</div>
			{@render editor()}
		</div>
	</div>
{:else}
	<div class="rounded-sm border border-border-default bg-background-default p-4 drop-shadow-xs">
		<div class="pb-2">
			<User handle={authorHandle} did={authorDid} />
		</div>
		{@render editor()}
	</div>
{/if}
