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

	export const segment = tv({
		base: "relative z-10 transition-[color] duration-150 hover:bg-transparent",
		variants: {
			selected: {
				true: "text-foreground-default",
				false: "text-foreground-muted hover:text-foreground-default"
			},
			painted: {
				true: "bg-background-default shadow-sm edge-ring-inset hover:bg-background-default",
				false: ""
			},
			collapsed: {
				true: "max-sm:pr-2.25",
				false: ""
			}
		}
	});
</script>

<script lang="ts">
	import type { ComponentProps } from "svelte";
	import Button from "#lib/components/ui/Button.svelte";
	import { getSegmentedControl } from "#lib/components/ui/SegmentedControl.svelte";

	type Props = Omit<ComponentProps<typeof Button>, "variant" | "href" | "role" | "value"> & {
		value: string;
		collapsible?: boolean;
	};

	let {
		value,
		collapsible = false,
		class: className,
		onclick,
		children,
		...rest
	}: Props = $props();

	const control = getSegmentedControl();
	const selected = $derived(control.value === value);
	const href = $derived(control.href?.(value));

	const select = (event: MouseEvent) => {
		onclick?.(event as Parameters<NonNullable<typeof onclick>>[0]);
		if (event.defaultPrevented) return;
		if (
			href &&
			(event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
		)
			return;
		control.select(value);
	};
</script>

<Button
	data-testid="segment"
	{...rest}
	variant="ghost"
	{href}
	role={href ? undefined : "radio"}
	aria-checked={href ? undefined : selected}
	aria-current={href && selected ? "page" : undefined}
	tabindex={href || selected ? undefined : -1}
	data-segment={value}
	onclick={select}
	class={segment({
		selected,
		painted: selected && !control.ready,
		collapsed: collapsible && !selected,
		class: className
	})}
>
	{#if collapsible && children}
		<span class={selected ? undefined : "max-sm:sr-only"}>{@render children()}</span>
	{:else}
		{@render children?.()}
	{/if}
</Button>