<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import { expect, userEvent, waitFor, within } from "storybook/test";
	import MessageSquarePlus from "$icon/message-square-plus";
	import Pencil from "$icon/pencil";
	import CommentEditor from "./CommentEditor.svelte";
	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
	import {
		sampleComments,
		sampleMarkup,
		sampleSubjectCid,
		sampleSubjectUri
	} from "./sampleComments";

	const { mine } = sampleComments;

	// edit-mode args reused by the Editing and Failed edit stories
	const editArgs = {
		rkey: mine.rkey,
		createdAt: mine.createdAt,
		body: mine.body,
		placeholder: "Edit your comment. Markdown is supported.",
		submitLabel: "Save",
		submitIcon: Pencil,
		oncancel: () => undefined
	};

	const { Story } = defineMeta({
		title: "Comment/CommentEditor",
		component: CommentEditor,
		tags: ["autodocs"],
		args: {
			subjectUri: sampleSubjectUri,
			subjectCid: sampleSubjectCid,
			authorDid: mine.authorDid,
			authorHandle: mine.authorHandle,
			markup: sampleMarkup,
			rows: 4,
			placeholder: "Add to the discussion. Markdown is supported.",
			submitLabel: "Comment",
			submitIcon: MessageSquarePlus
		}
	});
</script>

<!-- composing a new comment: empty, "Comment" label, no cancel -->
<Story name="Compose" />

<!-- editing an existing comment: prefilled body, "Save" label, cancel available -->
<Story name="Editing" args={editArgs} />

<!-- editing then failing to save against a fake agent that rejects -->
<Story
	name="Failed edit"
	args={editArgs}
	play={async ({ canvasElement }) => {
		const canvas = within(canvasElement);
		await userEvent.click(canvas.getByRole("button", { name: "Save" }));
		await waitFor(() =>
			expect(canvas.getByRole("alert")).toHaveTextContent(/network request failed/i)
		);
	}}
>
	{#snippet template(args)}
		<MockAuthProvider>
			<CommentEditor {...args} />
		</MockAuthProvider>
	{/snippet}
</Story>
