<script lang="ts">
	import { stringHref } from "#lib/components/strings/urls.ts";
	import Pencil from "$icon/pencil";
	import Trash2 from "$icon/trash-2";
	import Button from "#lib/components/ui/Button.svelte";
	import DropdownItem from "#lib/components/ui/DropdownItem.svelte";
	import MoreMenu from "#lib/components/ui/MoreMenu.svelte";
	import OwnerTitle from "#lib/components/repo/OwnerTitle.svelte";
	import StarButton from "#lib/components/repo/StarButton.svelte";

	interface Props {
		ownerHandle: string;
		ownerDid: string;
		rkey: string;
		filename: string;
		description?: string;
		isOwner?: boolean;
		stringUri: string;
		stringCid?: string;
		initialStarCount?: number | Promise<number>;
		initialStarRkey?: string | null | Promise<string | null>;
		onedit?: () => void;
		ondelete?: () => void;
		deleting?: boolean;
	}

	let {
		ownerHandle,
		ownerDid,
		rkey,
		filename,
		description = "",
		isOwner = false,
		stringUri,
		stringCid,
		initialStarCount,
		initialStarRkey,
		onedit,
		ondelete,
		deleting = false
	}: Props = $props();

	const selfHref = $derived(stringHref(ownerHandle, rkey));
</script>

{#snippet actions(className: string)}
	<div class={className}>
		<StarButton
			subject={{ kind: "string", uri: stringUri, cid: stringCid }}
			initialCount={initialStarCount}
			initialRkey={initialStarRkey}
			count="wide"
			size="small"
		/>
		{#if isOwner}
			<div class="flex items-center gap-xs">
				<Button
					variant="default"
					size="small"
					icon={Pencil}
					onclick={onedit}
					disabled={deleting}
				>
					Edit
				</Button>
				<MoreMenu
					label="More actions for {filename}"
					size="small"
					buttonVariant="default"
					disabled={deleting}
				>
					<DropdownItem icon={Trash2} danger onclick={ondelete} disabled={deleting}>
						Delete
					</DropdownItem>
				</MoreMenu>
			</div>
		{/if}
	</div>
{/snippet}

<div class="flex flex-col">
	<div class="mb-xs flex flex-col items-start justify-between gap-md sm:flex-row">
		<div class="flex min-w-0 flex-col gap-xs">
			<OwnerTitle {ownerDid} {ownerHandle} name={filename} href={selfHref} />
		</div>

		{@render actions("hidden shrink-0 items-center gap-xs sm:flex")}
	</div>

	{#if description}
		<p data-testid="stringDescription" class="typography-paragraph-small text-foreground-muted">
			{description}
		</p>
	{:else}
		<p class="typography-paragraph-small text-foreground-muted italic">
			This string has no description
		</p>
	{/if}

	{@render actions("mt-xs flex items-center justify-between gap-xs sm:hidden")}
</div>