<script module lang="ts">
	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
	import { expect } from "storybook/test";
	import CloneDropdown from "./CloneDropdown.svelte";
	import type { RepoInfo } from "./types";

	const repo: RepoInfo = {
		uri: "at://did:plc:repo/sh.tangled.repo.repo/3jzrepo",
		rkey: "3jzrepo",
		name: "tangled",
		ownerDid: "did:plc:owner",
		ownerHandle: "dawn",
		repoDid: "did:plc:repo",
		knot: "knot1.tangled.sh",
		defaultBranch: "main"
	};

	const selfHostedRepo = { ...repo, knot: "https://git.example.test:8443" };
	const repoWithoutDid = { ...repo, repoDid: undefined };
	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas" | "userEvent">;

	const openMenu = async ({ canvas, userEvent }: PlayContext) => {
		await userEvent.click(canvas.getByRole("button", { name: "Clone this repository" }));
		await expect(canvas.getByRole("menu")).toBeVisible();
	};

	const selectPermalink = async ({ canvas, userEvent }: PlayContext) => {
		await openMenu({ canvas, userEvent });
		await userEvent.click(canvas.getByRole("checkbox", { name: "Use permalink" }));
		await expect(canvas.getByText("git@tangled.org:did:plc:repo")).toBeVisible();
	};

	const { Story } = defineMeta({
		title: "Repo/CloneDropdown",
		component: CloneDropdown,
		tags: ["autodocs"],
		args: {
			repo,
			ref: "main",
			bobbinUrl: "https://bobbin.example.test"
		}
	});
</script>

<Story name="Opened clone menu" play={openMenu} />
<Story name="Permalink URLs" play={selectPermalink} />
<Story
	name="Self-hosted knot normalizes SSH host"
	args={{ repo: selfHostedRepo, ref: "feature/demo" }}
/>
<Story name="Repository without DID" args={{ repo: repoWithoutDid }} />
