<script lang="ts">
	import { StarHalfSolid, StarSolid } from 'flowbite-svelte-icons';
	import { twMerge, type ClassNameValue } from 'tailwind-merge';

	let {
		value = $bindable(5),
		name,
		disabled = false,
		class: className
	}: { value?: number; name?: string; disabled?: boolean; class?: ClassNameValue } = $props();

	let stars = $derived(
		[0, 1, 2, 3, 4].map((i) => {
			if (value - i >= 1) {
				return { id: i, value: 1 };
			} else if (value - i >= 0.5) {
				return { id: i, value: 0.5 };
			}
			return { id: i, value: 0 };
		})
	);
</script>

{#if name}
	<input
		type="number"
		{name}
		bind:value
		tabindex="-1"
		style="opacity: 0; position: absolute; pointer-events: none; z-index: -1; bottom: 0; left: 50%; height: 0; width: 0;"
	/>
{/if}

<span class={twMerge('flex justify-between ', className)}>
	<!-- es -->
	{#each stars as s (s.id)}
		<button
			type="button"
			{disabled}
			onclick={() => {
				if (s.id === 0 && value == 0.5) {
					value = 0;
					return;
				}
				if (value === s.id + 1) {
					value = s.id + 0.5;
					return;
				}
				value = s.id + 1;
			}}
			class="grid grid-cols-2 grid-rows-1"
		>
			{#if s.value >= 1}
				<StarSolid class="col-span-2 text-amber-400" />
			{:else}
				<StarSolid class="col-span-2 col-start-1 row-start-1" />
				{#if s.value >= 0.5}
					<StarHalfSolid class="col-span-1 col-start-1 row-start-1 text-amber-400" />
				{/if}
			{/if}
		</button>
	{/each}
</span>
