<script>
	import Icon from '../icon/Icon.svelte';
	import Loading from '../loading/Loading.svelte';

	/** @typedef {import('../../index.d').Stepper} Stepper */
	/** @type {Stepper} */
	let {
		value = $bindable(10),
		min = 0,
		max = 100,
		step = 1,
		vertical = false,
		numberHighlight = false,
		theme = true,
		radius = 'base',
		decimal = 0,
		async = false,
		asyncLoading = false,
		loading = {},
		padding = true,
		injClassOut = '',
		injClassBtn = '',
		injClassNum = '',
		onchange,
		ondecrease,
		onincrease,
	} = $props();

	// 圆角
	// Round
	const roundObj = { none: 'rounded-none', base: 'rounded', xl: 'rounded-xl', full: 'rounded-full' };

	// 减少
	// Decrease
	const decreaseFn = () => {
		if (!async) {
			if (value > min) {
				value = Math.max(min, value - step);
				onchange && onchange(value);
			}
		}
		ondecrease && ondecrease();
	};

	// 增加
	// Increase
	const increaseFn = () => {
		if (!async) {
			if (value < max) {
				value = Math.min(max, value + step);
				onchange && onchange(value);
			}
		}
		onincrease && onincrease();
	};
</script>

<div
	class="inline-flex items-center bg-gray-100 dark:bg-gray-800 {roundObj[radius] || 'rounded'} {padding
		? 'p-1'
		: 'p-0'} overflow-hidden {injClassOut} {vertical ? 'flex-col-reverse' : 'flex-row'}"
>
	<button
		onclick={decreaseFn}
		class="{vertical ? 'w-full' : 'w-9'} h-9 {roundObj[radius] ||
			'rounded'} flex flex-col items-center {injClassBtn} justify-center{numberHighlight
			? ''
			: theme
				? ' bg-primary/5 dark:bg-dark/10'
				: ' bg-white dark:bg-black'}"
		disabled={async || value === min}
		aria-label="decrease"
	>
		<span class={async || value === min ? 'opacity-20' : ''}>
			<Icon name="ri-subtract-line" theme={theme && (numberHighlight ? false : true)} />
		</span>
	</button>

	{#if async && asyncLoading}
		<div class="px-2 h-9 {roundObj[radius] || 'rounded'} flex flex-col items-center justify-center">
			<Loading width="6" height="6" {...loading} />
		</div>
	{:else}
		<div
			class="px-4 h-9 {roundObj[radius] || 'rounded'} flex flex-col items-center {injClassNum} justify-center{numberHighlight
				? theme
					? ' bg-primary/5 text-primary dark:bg-dark/10 dark:text-dark'
					: ' bg-white dark:bg-black'
				: ''}"
		>
			{value.toFixed(decimal)}
		</div>
	{/if}

	<button
		onclick={increaseFn}
		class="{vertical ? 'w-full' : 'w-9'} h-9 {roundObj[radius] ||
			'rounded'} flex flex-col items-center {injClassBtn} justify-center{numberHighlight
			? ''
			: theme
				? ' bg-primary/5 dark:bg-dark/10'
				: ' bg-white dark:bg-black'}"
		aria-label="increase"
		disabled={async || value === max}
	>
		<span class={async || value === max ? 'opacity-20' : ''}>
			<Icon name="ri-add-line" theme={theme && (numberHighlight ? false : true)} />
		</span>
	</button>
</div>
