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

	const languages = [
		{ name: "TypeScript", percentage: 58, share: 58.2 },
		{ name: "Svelte", percentage: 31, share: 30.7 },
		{ name: "CSS", percentage: 10, share: 10.1 },
		{ name: "Other", percentage: 0, share: 0.4 }
	];
	type PlayContext = Pick<
		StoryContext<Record<string, unknown>>,
		"canvas" | "canvasElement" | "userEvent"
	>;

	const expandBreakdown = async ({ canvas, canvasElement, userEvent }: PlayContext) => {
		const details = canvasElement.querySelector("details");
		const summary = details?.querySelector("summary");
		if (!(summary instanceof HTMLElement)) throw new Error("language summary was not rendered");
		await userEvent.click(summary);
		await expect(details).toHaveAttribute("open");
		await expect(canvas.getByText("TypeScript")).toBeVisible();
	};

	const { Story } = defineMeta({
		title: "Repo/LanguageBar",
		component: LanguageBar,
		tags: ["autodocs"],
		args: { languages }
	});
</script>

<Story name="Collapsed language bar" />
<Story name="Expanded percentage breakdown" play={expandBreakdown} />
<Story
	name="Sub-percent slice"
	args={{ languages: [{ name: "Other", percentage: 0, share: 0.4 }] }}
/>
<Story name="No languages" args={{ languages: [] }} />
