<script lang="ts">
	// a mock of the new-repository form's name field: the account picker next to
	// the repository-name input, composed from the web app's own Field, Dropdown
	// and Input. the accounts are fake -- a personal account and an organization
	// -- and carry gradient avatars in place of the profile pictures the avatar
	// service would sign, so the docs build stays clear of that service.
	import Card from "$lib/components/ui/Card.svelte";
	import Field from "$lib/components/ui/Field.svelte";
	import Input from "$lib/components/ui/Input.svelte";
	import Dropdown from "$lib/components/ui/Dropdown.svelte";
	import DropdownItem from "$lib/components/ui/DropdownItem.svelte";
	import Avatar from "$lib/components/ui/Avatar.svelte";
	import ChevronDown from "$icon/chevron-down";

	const gradient = (from: string, to: string): string =>
		`data:image/svg+xml,${encodeURIComponent(
			`<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="${from}"/><stop offset="1" stop-color="${to}"/></linearGradient></defs><rect width="64" height="64" fill="url(#g)"/></svg>`
		)}`;

	type Account = { did: string; handle: string; avatar: string };

	const accounts: Account[] = [
		{
			did: "did:plc:alice",
			handle: "alice.tngl.sh",
			avatar: gradient("#fb923c", "#f472b6")
		},
		{
			did: "did:plc:organization",
			handle: "organization.tngl.sh",
			avatar: gradient("#6366f1", "#a855f7")
		}
	];

	let selectedDid = $state(accounts[0].did);
	let name = $state("my-project");

	const selected = $derived(accounts.find((account) => account.did === selectedDid) ?? accounts[0]);
	const others = $derived(accounts.filter((account) => account.did !== selectedDid));
</script>

<Card
	padding="regular"
	class="repo-creation-name not-content my-lg typography-paragraph-regular">
	<Field
		label="Repository name"
		subtitle="Choose a unique, descriptive name. Use letters, numbers, periods, underscores, and hyphens."
	>
		{#snippet children({ id })}
			<div class="flex w-full flex-col gap-xs md:flex-row md:items-center md:gap-none">
				<Dropdown
					variant="button"
					label="Repository owner {selected.handle}"
					title="Select an account"
					class="min-w-0 md:me-xs md:max-w-[55%]">
					{#snippet trigger()}
						<span class="inline-flex min-w-0 items-center gap-1.5">
							<Avatar src={selected.avatar} size="regular" />
							<span class="min-w-0 truncate">{selected.handle}</span>
						</span>
						<ChevronDown class="ml-auto size-3.5 shrink-0" aria-hidden="true" />
					{/snippet}

					<div class="px-xs py-1.5 font-medium">Repository owner</div>
					{#each others as account (account.did)}
						<DropdownItem onclick={() => (selectedDid = account.did)}>
							<span class="inline-flex min-w-0 items-center gap-1.5">
								<Avatar src={account.avatar} size="regular" />
								<span class="min-w-0 truncate">{account.handle}</span>
							</span>
						</DropdownItem>
					{/each}
				</Dropdown>
				<Input
					{id}
					name="repo_name"
					placeholder="repository-name"
					maxlength={100}
					bind:value={name}
					class="flex-1" />
			</div>
		{/snippet}
	</Field>
</Card>

<style>
	/* the field's subtitle is a `p`, which takes the markdown column's margins;
	   give it back to the field */
	:global(.repo-creation-name p) {
		margin: 0;
	}
</style>