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

	const commit = (index: number): CommitSummary => ({
		hash: `${String(index).padStart(8, "0")}56789abcdef0123456789abcdef01234567`.slice(0, 40),
		shortHash: String(index).padStart(8, "0"),
		subject: `commit number ${index}`,
		body: index === 1 ? "a longer explanation hidden behind the disclosure." : "",
		authorName: "dawn",
		authorEmail: "dawn@tangled.org",
		when: "2026-07-28T09:00:00Z"
	});
	const commits = Array.from({ length: 12 }, (_, index) => commit(index + 1));
	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;

	const firstPage = async ({ canvas }: PlayContext) => {
		await expect(canvas.queryByRole("link", { name: "Previous" })).toBeNull();
		const next = canvas.getByRole("link", { name: "Next" });
		await expect(next).toHaveAttribute("href", "/dawn/tangled/commits/main?page=2");

		await expect(canvas.getAllByTitle("Copy SHA")).toHaveLength(commits.length);
		await expect(canvas.getAllByTitle("Browse repository at this commit")).toHaveLength(
			commits.length * 2
		);

		const chip = canvas.getAllByRole("link", { name: commits[0].shortHash })[0];
		await expect(chip).toHaveAttribute("href", `/dawn/tangled/commit/${commits[0].hash}`);
		const tree = canvas.getAllByTitle("Browse repository at this commit")[0];
		await expect(tree).toHaveAttribute("href", `/dawn/tangled/tree/${commits[0].hash}`);
	};

	const middlePage = async ({ canvas }: PlayContext) => {
		const prev = canvas.getByRole("link", { name: "Previous" });
		const next = canvas.getByRole("link", { name: "Next" });
		await expect(prev).toHaveAttribute("href", "/dawn/tangled/commits/main?page=3");
		await expect(next).toHaveAttribute("href", "/dawn/tangled/commits/main?page=5");
	};

	const bodyExpand = async ({ canvas }: PlayContext) => {
		// desktop and mobile rows each render a toggle
		const toggle = canvas.getAllByRole("button", { name: "Toggle commit body" })[0];
		await expect(canvas.queryByText(/a longer explanation/)).toBeNull();
		await userEvent.click(toggle);
		await expect(toggle).toHaveAttribute("aria-expanded", "true");
		await expect(canvas.getAllByText(/a longer explanation/).length).toBeGreaterThan(0);
	};

	const emptyLog = async ({ canvas }: PlayContext) => {
		await expect(canvas.getByText("No commits at main.")).toBeVisible();
		await expect(canvas.queryByRole("link", { name: "Next" })).toBeNull();
	};

	const { Story } = defineMeta({
		title: "Repo/CommitLogView",
		component: CommitLogView,
		tags: ["autodocs"],
		args: {
			ownerHandle: "dawn",
			repoName: "tangled",
			ref: "main",
			commits,
			tagsByCommit: {
				[commits[0].hash]: ["v1.0.0"]
			},
			page: 1,
			pageCount: 5
		}
	});
</script>

<Story name="First page" play={firstPage} />
<Story name="Middle page" args={{ page: 4 }} play={middlePage} />
<Story name="Expandable body" play={bodyExpand} />
<Story name="Empty log" args={{ commits: [], pageCount: 1 }} play={emptyLog} />
