<script module lang="ts">
	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
	import { expect } from "storybook/test";
	import MockAuthProvider from "$lib/components/testing/MockAuthProvider.svelte";
	import type { RepoCardData } from "../types";
	import RepoListTab from "./RepoListTab.svelte";

	const repo = (name: string, index: number): RepoCardData => ({
		name,
		repoDid: `did:plc:repo${index}`,
		ownerHandle: "dawn.tngl.boltless.dev",
		createdAt: "2026-08-01T00:00:00Z"
	});

	const repos = [
		repo("mittens", 1),
		repo("goggles", 2),
		repo("agv5di3saewnn", 3),
		repo("wetsuit", 4)
	];
	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;

	const onePage = async ({ canvas }: PlayContext) => {
		for (const { name } of repos) {
			await expect(canvas.getByRole("link", { name })).toBeVisible();
		}
		await expect(canvas.queryByRole("navigation", { name: "Pagination" })).toBeNull();
	};

	const { Story } = defineMeta({
		title: "Profile/RepoListTab",
		component: RepoListTab,
		tags: ["autodocs"],
		args: {
			initial: repos,
			total: repos.length,
			did: "did:plc:dawn",
			handle: "dawn.tngl.boltless.dev"
		}
	});
</script>

<Story name="Four repositories fit on one page" play={onePage}>
	{#snippet template(args)}
		<MockAuthProvider>
			<RepoListTab {...args} />
		</MockAuthProvider>
	{/snippet}
</Story>
