<script module lang="ts">
	import { tv, type VariantProps } from "tailwind-variants";

	export const avatarPicker = tv({
		slots: {
			label:
				"flex size-40 cursor-pointer flex-col items-center justify-center gap-1 overflow-hidden rounded-full border border-border-default text-foreground-subtle transition-colors hover:bg-background-subtle",
			image: "size-full rounded-full object-cover",
			placeholder: "flex flex-col items-center justify-center gap-1"
		}
	});

	export type AvatarPickerVariants = VariantProps<typeof avatarPicker>;
</script>

<script lang="ts">
	import Camera from "$icon/camera";
	import Field from "$lib/components/ui/Field.svelte";
	import Input from "$lib/components/ui/Input.svelte";
	import StepHeader from "./StepHeader.svelte";
	import { draft } from "./draft.svelte";

	const slot = avatarPicker();

	// no upload endpoint wired up: the preview is a local object url, which is all
	// the appview shows before its hx-post to /profile/avatar comes back
	const pick = (event: Event) => {
		const file = (event.currentTarget as HTMLInputElement).files?.[0];
		if (!file) return;
		if (draft.picture) URL.revokeObjectURL(draft.picture);
		draft.picture = URL.createObjectURL(file);
	};
</script>

<div class="flex flex-col gap-6">
	<StepHeader title="Welcome!" subtitle="Let's get your profile ready. All fields are optional." />

	<div class="flex flex-col gap-6 md:flex-row">
		<div class="flex shrink-0 justify-center md:block">
			<label class={slot.label()}>
				{#if draft.picture}
					<img src={draft.picture} alt="Your new avatar" class={slot.image()} />
				{:else}
					<span class={slot.placeholder()}>
						<Camera class="size-6" aria-hidden="true" />
						<span class="typography-paragraph-small">Upload picture</span>
					</span>
				{/if}
				<input type="file" accept="image/png,image/jpeg" class="hidden" onchange={pick} />
			</label>
		</div>

		<div class="flex min-w-0 flex-1 flex-col gap-4">
			<Field label="Bio" labelCase="normal">
				{#snippet children({ id })}
					<Input {id} placeholder="Tell us about yourself" bind:value={draft.description} />
				{/snippet}
			</Field>

			<Field label="Pronouns" labelCase="normal">
				{#snippet children({ id })}
					<Input {id} placeholder="they/them" bind:value={draft.pronouns} />
				{/snippet}
			</Field>

			<Field label="Website" labelCase="normal">
				{#snippet children({ id })}
					<Input {id} placeholder="example.com" bind:value={draft.website} />
				{/snippet}
			</Field>
		</div>
	</div>
</div>
