<script>
	import { getContext } from 'svelte';
	import Popup from '../popup/Popup.svelte';
	import zh_CN from '../../lang/zh_CN';

	// 当前语言
	// current language
	const currentLang = getContext('STDF_lang') || zh_CN;
	const actionSheetLang = currentLang.actionSheet;

	/** @typedef {import('../../index.d').ActionSheet} ActionSheetProps */
	/** @type {ActionSheetProps} */
	let {
		visible = $bindable(false),
		title = '',
		titleAlign = 'center',
		actions = [],
		popup = {},
		showCancel = false,
		cancelText = actionSheetLang.cancelText,
		actionClosable = true,
		align = 'center',
		oncancel,
		onclickAction,
		onclose,
	} = $props();

	// 静态样式类定义移到组件外部
	// static style class definition moved to component outside
	const STYLE_MAPS = {
		titleAlign: { left: 'text-left', center: 'text-center', right: 'text-right' },
		state: { normal: ' ', theme: ' text-primary dark:text-dark ', danger: ' text-error ', disabled: ' text-black/20 dark:text-white/20 ' },
		imgRadius: { none: 'rounded-none', base: 'rounded', full: 'rounded-full', lg: 'rounded-lg' },
		align: { left: 'justify-start pl-4', center: 'justify-center', right: 'justify-end pr-4' },
	};

	// 优化高度计算函数
	// optimize height calculation function
	const getTransitionDistance = (title, showCancel, actions) => {
		const BASE_HEIGHTS = { title: 40, cancel: 56, action: 56, actionWithDesc: 60, divider: 1 };
		return (
			(title ? BASE_HEIGHTS.title : 0) +
			(showCancel ? BASE_HEIGHTS.cancel : 0) +
			actions.reduce((total, item) => total + (item.desc ? BASE_HEIGHTS.actionWithDesc : BASE_HEIGHTS.action), 0) +
			(actions.length - 1) * BASE_HEIGHTS.divider
		);
	};

	// 优化事件处理函数
	// optimize event handling function
	const handleCancel = () => {
		visible = false;
		oncancel?.();
		onclose?.();
	};

	// 处理选项点击事件
	// handle option click event
	const handleActionClick = (index, item) => {
		if (item.style === 'disabled') return;
		onclickAction?.(index, item);
		if (actionClosable) {
			visible = false;
			onclose?.();
		}
	};
</script>

<Popup bind:visible size={0} transitionDistance={getTransitionDistance(title, showCancel, actions)} {onclose} {...popup}>
	{#if title}
		<div
			class="truncate text-xs text-black/50 dark:text-white/50 border-b border-black/5 dark:border-white/5 h-10 flex flex-col justify-center {STYLE_MAPS
				.titleAlign[titleAlign] || STYLE_MAPS.titleAlign['left']}"
		>
			{title}
		</div>
	{/if}
	<div>
		{#each actions as item, index}
			<button
				class="{item.style !== 'disabled'
					? 'active:scale-90 '
					: 'cursor-not-allowed '}transition-all flex items-center gap-2 w-full {STYLE_MAPS.align[align] || STYLE_MAPS.align['center']}"
				disabled={item.style === 'disabled'}
				onclick={() => handleActionClick(index, item)}
			>
				{#if item.showImg}
					<div class="w-6 h-6 overflow-hidden {STYLE_MAPS.imgRadius[item.imgRadius] || 'rounded-full'}">
						<img class="w-full h-full object-cover" src={item.imgSrc} alt="" />
					</div>
				{/if}
				<div>
					<div
						class="truncate text-center font-bold {STYLE_MAPS.state[item.style] ||
							STYLE_MAPS.state.normal} flex flex-col justify-center {item.desc ? ' h-10' : ' h-14'}"
					>
						{item.content}
					</div>
					{#if item.desc}
						<div class="truncate text-center text-xs pb-1 text-black/50 dark:text-white/40">{item.desc}</div>
					{/if}
				</div>
			</button>
			{#if index !== actions.length - 1}
				<div class="h-px w-full bg-black/5 dark:bg-white/5"></div>
			{/if}
		{/each}
	</div>
	{#if showCancel}
		<div class="bg-black/5 dark:bg-white/5 h-2"></div>
		<button
			class="active:scale-90 transition-all h-12 flex items-center w-full {STYLE_MAPS.align[align] || STYLE_MAPS.align['center']}"
			onclick={handleCancel}
		>
			<div>
				{cancelText}
			</div>
		</button>
	{/if}
</Popup>
