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

	// no-ops; submitting is inert here (needs an authed agent context)
	const noop = () => undefined;

	const { Story } = defineMeta({
		title: "Repo/Issues/IssueForm",
		component: IssueForm,
		tags: ["autodocs"],
		argTypes: {
			mode: {
				control: { type: "inline-radio" },
				options: ["create", "edit"]
			}
		},
		args: {
			repoDid: "did:plc:wshs7t2adsemcrrd4snkeqli",
			markup: { repo: "tangled.org/core", ref: "main", host: "tangled.org" },
			mode: "create",
			onsaved: noop,
			oncancel: noop
		}
	});
</script>

<Story name="Create" />
<Story
	name="Edit"
	args={{
		mode: "edit",
		title: "Add a full trending repositories view",
		body: "I'd like a `/trending` view that shows more than the five repositories in the sidebar."
	}}
/>

<!-- fills the form 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.getByLabelText("Title"), "Something broke");
		await userEvent.type(
			canvas.getByPlaceholderText(/describe your issue/i),
			"details{Control>}{Enter}{/Control}"
		);
		await waitFor(() =>
			expect(canvas.getByRole("alert")).toHaveTextContent(/network request failed/i)
		);
	}}
>
	{#snippet template(args)}
		<MockAuthProvider>
			<IssueForm {...args} />
		</MockAuthProvider>
	{/snippet}
</Story>
