<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import { expect, userEvent, waitFor, within } from "storybook/test";
	import CommentBox from "./CommentBox.svelte";
	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";

	const { Story } = defineMeta({
		title: "Comment/CommentBox",
		component: CommentBox,
		tags: ["autodocs"],
		args: {
			subjectUri: "at://did:plc:alice/sh.tangled.repo.issue/aaa",
			subjectCid: "bafyreib2rxk3rh6kzwq6yhkp6bd4vjxj3xj2xj2xj2xj2xj2xj2xj2xj2",
			authorDid: "did:plc:alice",
			authorHandle: "alice.pds.tngl.boltless.dev",
			markup: { repo: "tangled.org/core", ref: "main", host: "tangled.org" }
		}
	});
</script>

<Story name="Default" />

<!-- types a comment and submits with ctrl+enter against a fake agent that rejects, showing the error alert -->
<Story
	name="Failed submission"
	play={async ({ canvasElement }) => {
		const canvas = within(canvasElement);
		await userEvent.type(
			canvas.getByPlaceholderText(/add to the discussion/i),
			"This will fail{Control>}{Enter}{/Control}"
		);
		await waitFor(() =>
			expect(canvas.getByRole("alert")).toHaveTextContent(/network request failed/i)
		);
	}}
>
	{#snippet template(args)}
		<MockAuthProvider>
			<CommentBox {...args} />
		</MockAuthProvider>
	{/snippet}
</Story>
