<script lang="ts">
	import { buttonVariants } from "$lib/components/ui/button";
	import { capitalize } from "$lib/core/string.utils";
	import { cn } from "$lib/utils";
	import { currencyStore, currencyVM } from "./currency.vm.svelte";
	import * as Dialog from "$lib/components/ui/dialog/index.js";
	import Title from "$lib/components/atoms/title.svelte";
	import { TRANSITION_ALL } from "$lib/core/constants";
	import Input from "$lib/components/ui/input/input.svelte";
	import Icon from "$lib/components/atoms/icon.svelte";
	import GlobeIcon from "~icons/solar/earth-outline";

	let { invert }: { invert: boolean } = $props();
</script>

<Dialog.Root>
	<Dialog.Trigger
		class={buttonVariants({ variant: invert ? "glassWhite" : "ghost" })}
	>
		<Icon icon={GlobeIcon} cls="w-auto h-6" />
		{$currencyStore.code}
	</Dialog.Trigger>
	<Dialog.Content class="max-w-7xl">
		<Title size="h4" weight="semibold">Currency Select</Title>

		<Input
			placeholder="Search"
			class="w-full md:w-1/3 lg:w-1/4"
			bind:value={currencyVM.query}
			oninput={() => {
				currencyVM.applyQuery();
			}}
		/>

		<div
			class="grid max-h-[70vh] grid-cols-2 gap-2 overflow-y-auto p-4 md:grid-cols-3 md:gap-4 md:p-8 lg:grid-cols-4"
		>
			{#each currencyVM.queriedCurrencies as each}
				<button
					class={cn(
						"flex w-full flex-col items-start gap-2 rounded-lg border-2 border-transparent bg-white/50 p-4 text-start shadow-sm hover:bg-gray-100",
						each.code === $currencyStore.code
							? "border-brand-400 bg-brand-50 shadow-md"
							: "",
						TRANSITION_ALL,
					)}
					onclick={() => {
						currencyVM.setCurrency(each.code);
					}}
				>
					<small>{capitalize(each.currency)}</small>
					<strong>{each.code.toUpperCase()}</strong>
				</button>
			{/each}
		</div>
	</Dialog.Content>
</Dialog.Root>

<!-- <LabelWrapper label="Currency"> -->
<!-- 	<Select.Root -->
<!-- 		type="single" -->
<!-- 		required -->
<!-- 		onValueChange={(code) => { -->
<!-- 			currencyVM.setCurrency(code); -->
<!-- 		}} -->
<!-- 		name="role" -->
<!-- 	> -->
<!-- 		<Select.Trigger> -->
<!-- 			{capitalize($currencyStore.currency ?? "select")} -->
<!-- 		</Select.Trigger> -->
<!-- 		<Select.Content> -->
<!-- 			{#each currencyVM.currencies as each} -->
<!-- 				<Select.Item value={each.code}> -->
<!-- 					{capitalize(each.currency)} -->
<!-- 				</Select.Item> -->
<!-- 			{/each} -->
<!-- 		</Select.Content> -->
<!-- 	</Select.Root> -->
<!-- </LabelWrapper> -->
