<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import { expect, userEvent, waitFor, within } from "storybook/test";
	import CommentList from "./CommentList.svelte";
	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
	import {
		longThread,
		multiReplyThread,
		sampleComments,
		sampleMarkup,
		sampleSubjectCid,
		sampleSubjectUri,
		sampleThreads
	} from "./sampleComments";

	const { Story } = defineMeta({
		title: "Comment/CommentList",
		component: CommentList,
		tags: ["autodocs"],
		args: {
			threads: sampleThreads,
			subjectUri: sampleSubjectUri,
			subjectCid: sampleSubjectCid,
			markup: sampleMarkup
		}
	});
</script>

<Story name="Populated" />
<Story name="Empty" args={{ threads: [] }} />
<Story name="Multiple replies" args={{ threads: [multiReplyThread] }} />

<!-- logged in as alice: her reply in the middle of the thread is being edited inline -->
<Story
	name="Editing a mid-thread reply"
	args={{ threads: [longThread] }}
	play={async ({ canvasElement }) => {
		const canvas = within(canvasElement);
		// only alice's (middle) reply exposes an edit control
		await userEvent.click(canvas.getByRole("button", { name: "Edit comment" }));
		const textarea = await waitFor(() => canvas.getByPlaceholderText(/edit your comment/i));
		await expect(textarea).toHaveValue(sampleComments.mine.body);
		await expect(canvas.getByRole("button", { name: "Save" })).toBeInTheDocument();
		await expect(canvas.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
	}}
>
	{#snippet template(args)}
		<MockAuthProvider>
			<CommentList {...args} />
		</MockAuthProvider>
	{/snippet}
</Story>
