<script lang="ts">
	import { resolve } from "$app/paths";
	import CheckCheck from "$icon/check-check";
	import Cog from "$icon/cog";
	import Glasses from "$icon/glasses";
	import Inbox from "$icon/inbox";
	import Button from "#lib/components/ui/Button.svelte";
	import Segment from "#lib/components/ui/Segment.svelte";
	import SegmentedControl from "#lib/components/ui/SegmentedControl.svelte";
	import type { CategoryFilter, ReadFilter } from "#lib/components/notifications/types.ts";

	interface Props {
		readFilter?: ReadFilter;
		categoryFilter?: CategoryFilter;
		hasNotifications?: boolean;
		preferences?: boolean;
		onReadFilter?: (filter: ReadFilter) => void;
		onCategoryFilter?: (filter: CategoryFilter) => void;
		onMarkAllRead?: () => void;
	}

	let {
		readFilter = "inbox",
		categoryFilter = "all",
		hasNotifications = true,
		preferences = true,
		onReadFilter,
		onCategoryFilter,
		onMarkAllRead
	}: Props = $props();

	const pageQuery = (read: ReadFilter, category: CategoryFilter) =>
		category === "all" ? `read=${read}` : `read=${read}&category=${category}`;

	const pageHref = (read: ReadFilter, category: CategoryFilter) =>
		resolve(`/notifications?${pageQuery(read, category)}` as "/");

	const categories: CategoryFilter[] = ["all", "work", "social"];
</script>

<div class="flex flex-wrap items-center justify-between gap-xs">
	<div class="flex flex-wrap items-center gap-xs">
		<SegmentedControl
			value={readFilter}
			href={onReadFilter ? undefined : (filter) => pageHref(filter, categoryFilter)}
			label="Read state"
		>
			<Segment value="inbox" icon={Inbox} onclick={() => onReadFilter?.("inbox")}
				>Inbox</Segment
			>
			<Segment value="unread" icon={Glasses} onclick={() => onReadFilter?.("unread")}
				>Unread</Segment
			>
		</SegmentedControl>

		{#if hasNotifications}
			<Button
				variant="ghost"
				icon={CheckCheck}
				onclick={() => onMarkAllRead?.()}
				aria-label="Mark all read"
			>
				<span class="hidden sm:inline" aria-hidden="true">Mark all read</span>
			</Button>
		{/if}
	</div>

	{#if onCategoryFilter}
		<SegmentedControl value={categoryFilter} label="Category">
			{#each categories as category (category)}
				<Segment
					value={category}
					class="capitalize"
					onclick={() => onCategoryFilter(category)}
				>
					{category}
				</Segment>
			{/each}
		</SegmentedControl>
	{/if}

	{#if preferences}
		<Button
			variant="ghost"
			icon={Cog}
			href={resolve("/settings/notifications" as "/")}
			aria-label="Preferences"
		>
			<span class="hidden md:inline" aria-hidden="true">Preferences</span>
		</Button>
	{/if}
</div>