<script lang="ts">
	import CalendarIcon from "~icons/solar/calendar-broken";
	import {
		DateFormatter,
		type DateValue,
		getLocalTimeZone,
	} from "@internationalized/date";
	import { cn } from "$lib/utils";
	import { Calendar } from "$lib/components/ui/calendar/index.js";
	import * as Popover from "$lib/components/ui/popover/index.js";
	import { TRANSITION_COLORS } from "$lib/core/constants";
	import Icon from "../atoms/icon.svelte";

	const inputSizes = {
		sm: "px-3 py-2 text-sm file:text-sm",
		default: "px-4 py-3",
		lg: "px-5 py-3 text-lg file:text-lg",
		xl: "px-6 py-4 text-xl file:text-xl",
	};

	const df = new DateFormatter("en-US", {
		dateStyle: "long",
	});

	let contentRef = $state<HTMLElement | null>(null);

	let {
		value = $bindable(),
		inputSize = "default",
	}: {
		value: DateValue;
		inputSize?: keyof typeof inputSizes;
	} = $props();
</script>

<Popover.Root>
	<Popover.Trigger
		class={cn(
			"bg-brand-50/10 focus:border-brand-500 focus:bg-brand-50/60 dark:bg-brand-950/85 flex w-full items-center gap-2 rounded-md border-2 border-white shadow-[inset_0_3px_8px_0_rgba(0,0,0,0.15)] file:border-0 file:bg-transparent file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-border/40 dark:shadow-[inset_0_3px_12px_0_rgba(0,0,0,0.50)] dark:focus:border-border",
			inputSizes[inputSize],
			TRANSITION_COLORS,
			value ? "" : "text-muted-foreground",
		)}
	>
		<Icon icon={CalendarIcon} cls="mr-2 h-6 w-auto" />
		{value ? df.format(value.toDate(getLocalTimeZone())) : "Pick a date"}
	</Popover.Trigger>
	<Popover.Content bind:ref={contentRef} class="w-auto p-0">
		<Calendar type="single" bind:value />
	</Popover.Content>
</Popover.Root>
