<script module lang="ts">
	import { defineMeta } from "@storybook/addon-svelte-csf";
	import SettingsPanel from "./SettingsPanel.svelte";
	import SettingsHeader from "./SettingsHeader.svelte";
	import SettingsSection from "./SettingsSection.svelte";
	import SettingsBlock from "./SettingsBlock.svelte";
	import SettingsList from "./SettingsList.svelte";
	import SettingsRow from "./SettingsRow.svelte";
	import SettingsEntry from "./SettingsEntry.svelte";
	import SettingsToolbar from "./SettingsToolbar.svelte";
	import CodeChip from "./CodeChip.svelte";
	import type { SettingsNavItem } from "./SettingsNav.svelte";
	import Button from "$lib/components/ui/Button.svelte";
	import Input from "$lib/components/ui/Input.svelte";
	import Toggle from "$lib/components/ui/Toggle.svelte";
	import User from "$icon/user-round";
	import Key from "$icon/key";
	import Mail from "$icon/mail";
	import SlidersHorizontal from "$icon/sliders-horizontal";
	import UsersRound from "$icon/users-round";
	import Plus from "$icon/plus";
	import Trash from "$icon/trash-2";
	import UserRoundPlus from "$icon/user-round-plus";
	import UserRoundMinus from "$icon/user-round-minus";

	const userItems: SettingsNavItem[] = [
		{ id: "profile", label: "Profile", href: "/settings", icon: User },
		{ id: "keys", label: "Keys", href: "/settings/keys", icon: Key },
		{ id: "emails", label: "Emails", href: "/settings/emails", icon: Mail }
	];

	const repoItems: SettingsNavItem[] = [
		{ id: "general", label: "General", href: "/settings", icon: SlidersHorizontal },
		{ id: "access", label: "Access", href: "/settings/access", icon: UsersRound }
	];

	const { Story } = defineMeta({
		title: "Settings/SettingsPanel",
		component: SettingsPanel,
		tags: ["autodocs"],
		parameters: { layout: "fullscreen" }
	});
</script>

<!-- Narrow the browser under 768px to see the nav collapse into its select and the
     panel go full-bleed; under 640px the rows drop their controls onto a second line. -->
<Story name="User settings">
	<SettingsPanel items={userItems} active="keys">
		<SettingsHeader
			title="Keys"
			description="SSH public keys added here will be broadcasted to knots that you are a member of."
		/>
		<div class="flex w-full flex-col gap-4">
			<SettingsToolbar>
				{#snippet end()}
					<Button icon={Plus}>Add key</Button>
				{/snippet}
			</SettingsToolbar>
			<SettingsList>
				<SettingsEntry icon={Key} title="laptop">
					{#snippet meta()}
						<span class="font-mono typography-monospace-regular break-all text-foreground-muted">
							SHA256:68LweWe1t0oBuxOD8CpUyhjxGzBiylRDTNVD8WMVKfg=
						</span>
					{/snippet}
					{#snippet actions()}
						<Button variant="danger" icon={Trash}>Delete</Button>
					{/snippet}
				</SettingsEntry>
			</SettingsList>
		</div>
		<SettingsSection title="Account">
			<SettingsRow title="Bio" stack>
				<Input placeholder="Write a bio" class="w-full sm:w-80" />
			</SettingsRow>
			<SettingsRow title="Decentralized Identifier (DID)" stack>
				<CodeChip class="w-full break-all sm:w-auto">did:plc:rhcxsdhvxax7ezkq6zbunls2</CodeChip>
			</SettingsRow>
			<SettingsRow title="Hide mine">
				<Toggle aria-label="Hide mine" />
			</SettingsRow>
		</SettingsSection>
	</SettingsPanel>
</Story>

<Story name="Repository settings">
	<SettingsPanel items={repoItems} active="access" label="Repository settings">
		<SettingsHeader title="Access" />
		<SettingsBlock
			title="Collaborators"
			description="Any user added as a collaborator will be able to push commits and tags to this repository."
			separator
		>
			{#snippet action()}
				<Button icon={UserRoundPlus}>Add collaborator</Button>
			{/snippet}
			<SettingsList gap="3">
				<SettingsRow stack>
					{#snippet label()}
						<span class="flex min-w-0 items-center gap-2">
							<span class="typography-paragraph-regular text-foreground-default">user.tld</span>
							<span class="typography-paragraph-regular text-foreground-muted">Owner</span>
						</span>
					{/snippet}
				</SettingsRow>
				<SettingsRow stack>
					{#snippet label()}
						<span class="flex min-w-0 items-center gap-2">
							<span class="typography-paragraph-regular text-foreground-default">user2.tld</span>
							<span class="typography-paragraph-regular text-foreground-muted">Collaborator</span>
						</span>
					{/snippet}
					<Button icon={UserRoundMinus}>Remove collaborator</Button>
				</SettingsRow>
			</SettingsList>
		</SettingsBlock>
	</SettingsPanel>
</Story>
