<script lang="ts">
	import * as Tabs from '$lib/components/ui/tabs/index.js';
	import { metaTitle } from '$lib/stores/metaTitle.svelte.js';
	$metaTitle.title = 'Brands';
	let { data } = $props();

	let brands = $state<[{ id: Number; name: string; image: string }]>([
		{ id: 0, name: '', image: '' }
	]);

	$effect(() => {
		data?.brand
			?.then((e) => {
				brands = e.brand;
			})
			.catch((e) => console.log(e));
	});

	$inspect(brands);

	const alphabets = [
		'a',
		'b',
		'c',
		'd',
		'e',
		'f',
		'g',
		'h',
		'i',
		'j',
		'k',
		'l',
		'm',
		'n',
		'o',
		'p',
		'q',
		'r',
		's',
		't',
		'u',
		'v',
		'w',
		'x',
		'y',
		'z'
	];
</script>

<div class="mx-auto my-12 flex w-full max-w-screen-2xl flex-col gap-6 px-12 py-4">
	<div>
		<Tabs.Root value={brands[0]?.name.slice(0, 1).toLowerCase()} class="flex flex-col gap-12">
			<Tabs.List class="flex-wrap gap-2 bg-transparent">
				{#each alphabets as letter}
					<!-- {#each brands as brand} -->
					<!-- {#if letter === brand?.name.slice(0, 1).toLowerCase()} -->
					<Tabs.Trigger
						disabled={!brands.some((b) => b.name.slice(0, 1).toLowerCase() === letter)}
						value={letter}
						class="h-12 w-12 cursor-pointer rounded-sm bg-gray-100 data-[state=active]:bg-primary data-[state=active]:text-white"
						>{letter.toUpperCase()}</Tabs.Trigger
					>
					<!-- {/if} -->
					<!-- {/each} -->
				{/each}
			</Tabs.List>
			{#each alphabets as letter}
				{#each brands as brand}
					{#if letter === brand?.name.slice(0, 1).toLowerCase()}
						<Tabs.Content value={letter} class="grid grid-cols-5 gap-4">
							<a href={`/category/brand/${brand?.id}`}>
								<div
									class="flex w-full flex-col gap-4 rounded-md border border-gray-200 p-2 hover:shadow-md hover:transition-all hover:duration-200"
								>
									<img
										src={brand?.image}
										alt={brand?.name}
										class="aspect-square rounded-sm object-contain object-center"
									/>
									<p class="text-center text-lg">
										{brand?.name}
									</p>
								</div>
							</a>
						</Tabs.Content>
					{/if}
				{/each}
			{/each}
		</Tabs.Root>
	</div>
</div>
