<script lang="ts">
	import { resolve } from "$app/paths";
	import GalleryVertical from "$icon/gallery-vertical";
	import Button from "$lib/components/ui/Button.svelte";
	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
	import EmptyState from "$lib/components/ui/EmptyState.svelte";
	import TimelineRepoEvent from "$lib/components/timeline/TimelineRepoEvent.svelte";
	import TimelineStarEvent from "$lib/components/timeline/TimelineStarEvent.svelte";
	import TimelineFollowEvent from "$lib/components/timeline/TimelineFollowEvent.svelte";
	import type { PageData } from "./$types";

	let { data }: { data: PageData } = $props();
</script>

<svelte:head>
	<title>Timeline &middot; Tangled</title>
</svelte:head>

<section class="mx-auto flex w-full max-w-screen-md flex-col gap-4 px-6 py-8">
	<div class="flex items-center justify-between">
		<h1 class="flex items-center gap-2 text-2xl font-semibold">
			<GalleryVertical class="size-5 text-foreground-subtle" aria-hidden="true" />
			Timeline
		</h1>
		{#if data.signedIn}
			<ButtonGroup>
				<Button
					href={resolve("/timeline" as "/")}
					variant={data.followingOnly ? "ghost" : "default"}>Global</Button
				>
				<Button
					href={resolve("/timeline?following=true" as "/")}
					variant={data.followingOnly ? "default" : "ghost"}>Following</Button
				>
			</ButtonGroup>
		{/if}
	</div>

	{#each data.feed as item (item.event.uri)}
		{@const event = item.event}
		{#if event.$type === "sh.tangled.feed.getTimeline#repoEvent"}
			<TimelineRepoEvent {event} eventAt={item.eventAt} />
		{:else if event.$type === "sh.tangled.feed.getTimeline#starEvent"}
			<TimelineStarEvent {event} eventAt={item.eventAt} />
		{:else if event.$type === "sh.tangled.feed.getTimeline#followEvent"}
			<TimelineFollowEvent {event} eventAt={item.eventAt} />
		{/if}
	{:else}
		<EmptyState
			message={data.followingOnly ? "Nobody you follow has been busy." : "Nothing here yet."}
		/>
	{/each}
</section>
