import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import useEngineContext from "../../../hooks/useEngineContext.js";
import locales_default from "../../../components/checkout/locales.js";
import { PaymentListProvider } from "../context.js";
import PisellPaymentListItem from "../Item/index.js";
import React, { useEffect, useRef, useState } from "react";
import { locales } from "@pisell/utils";
import classNames from "classnames";
import { useDebounceFn } from "ahooks";
import { ChevronDownDouble } from "@pisell/icon";
import "./index.less";
//#region src/pro/pisellPaymentList/List/index.tsx
/**
* PisellPaymentList 组件
* 支付方式列表组件，包含滚动功能
*/
function PisellPaymentList({ amountSymbol, selectedId, onSelect, onEdit, paymentMethods = [], customAmount, disabled = false, showCashPayment = false, isRadioMode = false, className, style, columnCount, maxHeight, rowGap = 8, columnGap = 8, showScrollbar = false, minColumnWidth = 200, onScroll, onScrollableChange, scrollButtonStyle, containerStyle, slots, itemConfig = {}, children }) {
	var _itemConfig$actionCon, _context$appHelper, _context$appHelper$ge, _context$appHelper$ge2, _context$appHelper$ut;
	const context = useEngineContext();
	const containerRef = useRef(null);
	const contentRef = useRef(null);
	const [isScrollable, setIsScrollable] = useState(false);
	const [showBottomGradient, setShowBottomGradient] = useState(false);
	console.log("paymentList", {
		amountSymbol,
		selectedId,
		onSelect,
		onEdit,
		paymentMethods,
		customAmount,
		disabled,
		showCashPayment,
		isRadioMode,
		className,
		style,
		columnCount,
		maxHeight,
		rowGap,
		columnGap,
		showScrollbar,
		minColumnWidth,
		onScroll,
		onScrollableChange,
		scrollButtonStyle,
		containerStyle,
		slots,
		itemConfig
	});
	const [internalSelectedId, setInternalSelectedId] = useState(selectedId);
	useEffect(() => {
		if (selectedId !== void 0) setInternalSelectedId(selectedId);
	}, [selectedId]);
	if (!(itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.actionConfig)) itemConfig = _objectSpread2(_objectSpread2({}, itemConfig), {}, { actionConfig: { style: isRadioMode ? "radio" : "button" } });
	else itemConfig.actionConfig.style = isRadioMode ? "radio" : "button";
	const effectiveIsRadioMode = isRadioMode || (itemConfig === null || itemConfig === void 0 || (_itemConfig$actionCon = itemConfig.actionConfig) === null || _itemConfig$actionCon === void 0 ? void 0 : _itemConfig$actionCon.style) === "radio";
	const currentSelectedId = selectedId;
	locales.init(locales_default, ((_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.utils) === null || _context$appHelper === void 0 || (_context$appHelper$ge = _context$appHelper.getApp) === null || _context$appHelper$ge === void 0 || (_context$appHelper$ge = _context$appHelper$ge.call(_context$appHelper)) === null || _context$appHelper$ge === void 0 || (_context$appHelper$ge = _context$appHelper$ge.locales) === null || _context$appHelper$ge === void 0 || (_context$appHelper$ge2 = _context$appHelper$ge.getLocale) === null || _context$appHelper$ge2 === void 0 ? void 0 : _context$appHelper$ge2.call(_context$appHelper$ge)) || ((_context$appHelper$ut = context.appHelper.utils) === null || _context$appHelper$ut === void 0 || (_context$appHelper$ut = _context$appHelper$ut.storage) === null || _context$appHelper$ut === void 0 ? void 0 : _context$appHelper$ut.get("umi_locale")) || "en");
	/**
	* 创建本地翻译函数，优先使用 checkout 语言包
	*/
	const getText = (key, fallback) => {
		var _context$appHelper2, _context$appHelper2$g, _context$appHelper2$g2, _context$appHelper$ut2, _checkoutLocales;
		const checkoutText = (_checkoutLocales = locales_default[((_context$appHelper2 = context.appHelper) === null || _context$appHelper2 === void 0 || (_context$appHelper2 = _context$appHelper2.utils) === null || _context$appHelper2 === void 0 || (_context$appHelper2$g = _context$appHelper2.getApp) === null || _context$appHelper2$g === void 0 || (_context$appHelper2$g = _context$appHelper2$g.call(_context$appHelper2)) === null || _context$appHelper2$g === void 0 || (_context$appHelper2$g = _context$appHelper2$g.locales) === null || _context$appHelper2$g === void 0 || (_context$appHelper2$g2 = _context$appHelper2$g.getLocale) === null || _context$appHelper2$g2 === void 0 ? void 0 : _context$appHelper2$g2.call(_context$appHelper2$g)) || ((_context$appHelper$ut2 = context.appHelper.utils) === null || _context$appHelper$ut2 === void 0 || (_context$appHelper$ut2 = _context$appHelper$ut2.storage) === null || _context$appHelper$ut2 === void 0 ? void 0 : _context$appHelper$ut2.get("umi_locale")) || "en"]) === null || _checkoutLocales === void 0 ? void 0 : _checkoutLocales[key];
		if (checkoutText) return checkoutText;
		return locales.getText(key) || fallback;
	};
	/**
	* 防抖处理支付方式选择
	*/
	const { run: handlePaymentSelect } = useDebounceFn((method) => {
		if (disabled) return;
		if (effectiveIsRadioMode && selectedId === void 0) setInternalSelectedId(method.id);
		if (typeof onSelect === "function") onSelect(method);
	}, { wait: 500 });
	/**
	* 计算列数
	*/
	const calculatedColumnCount = columnCount !== null && columnCount !== void 0 ? columnCount : showCashPayment ? 1 : 2;
	/**
	* 根据列数获取对应的CSS类名
	*/
	const getColumnClassName = () => {
		if (calculatedColumnCount === "auto") return "pisell-payment-list-auto-column";
		switch (calculatedColumnCount) {
			case 1: return "pisell-payment-list-single-column";
			case 2: return "pisell-payment-list-two-column";
			case 3: return "pisell-payment-list-three-column";
			case 4: return "pisell-payment-list-four-column";
			case 5: return "pisell-payment-list-five-column";
			case 6: return "pisell-payment-list-six-column";
			default: return "pisell-payment-list-single-column";
		}
	};
	/**
	* 计算grid样式
	*/
	const getGridStyle = () => {
		const gridStyle = {};
		gridStyle.gap = `${rowGap}px ${columnGap}px`;
		if (calculatedColumnCount === "auto") gridStyle.gridTemplateColumns = `repeat(auto-fit, minmax(${minColumnWidth}px, 1fr))`;
		return gridStyle;
	};
	/**
	* 检查是否需要滚动
	*/
	const checkScrollable = () => {
		if (containerRef.current && contentRef.current) {
			const containerHeight = containerRef.current.clientHeight;
			const contentHeight = contentRef.current.scrollHeight;
			const scrollTop = containerRef.current.scrollTop;
			if (containerHeight < 50) return;
			const maxScrollTop = contentHeight - containerHeight;
			const needsScroll = contentHeight > containerHeight + 10;
			setIsScrollable(needsScroll);
			if (needsScroll) setShowBottomGradient(scrollTop < maxScrollTop - 5);
			else setShowBottomGradient(false);
			onScrollableChange === null || onScrollableChange === void 0 || onScrollableChange(needsScroll);
		}
	};
	/**
	* 处理滚动事件
	*/
	const handleScroll = (event) => {
		checkScrollable();
		if (onScroll && event instanceof Event && event.target) onScroll(_objectSpread2(_objectSpread2({}, event), {}, {
			currentTarget: event.target,
			target: event.target
		}));
	};
	/**
	* 滚动到底部
	*/
	const scrollToBottom = () => {
		if (containerRef.current) containerRef.current.scrollTo({
			top: containerRef.current.scrollHeight,
			behavior: "smooth"
		});
	};
	/**
	* 监听内容变化和容器大小变化
	*/
	useEffect(() => {
		const resizeObserver = new ResizeObserver(() => {
			checkScrollable();
		});
		const container = containerRef.current;
		if (container) {
			resizeObserver.observe(container);
			container.addEventListener("scroll", handleScroll);
		}
		if (contentRef.current) resizeObserver.observe(contentRef.current);
		return () => {
			resizeObserver.disconnect();
			if (container) container.removeEventListener("scroll", handleScroll);
		};
	}, [paymentMethods]);
	/**
	* 获取指定支付方式的配置（合并统一配置和该支付方式自带的配置）
	*/
	const getItemConfig = (method) => {
		var _itemConfig$actionCon2, _baseItemConfig$actio, _method$itemConfig$ac, _baseItemConfig$actio2, _method$itemConfig$ac2;
		let baseItemConfig = itemConfig;
		if (isRadioMode && !(itemConfig === null || itemConfig === void 0 || (_itemConfig$actionCon2 = itemConfig.actionConfig) === null || _itemConfig$actionCon2 === void 0 ? void 0 : _itemConfig$actionCon2.style)) baseItemConfig = _objectSpread2(_objectSpread2({}, itemConfig), {}, { actionConfig: _objectSpread2(_objectSpread2({}, itemConfig === null || itemConfig === void 0 ? void 0 : itemConfig.actionConfig), {}, { style: "radio" }) });
		if (!method.itemConfig) return baseItemConfig;
		return {
			containerStyle: _objectSpread2(_objectSpread2({}, baseItemConfig === null || baseItemConfig === void 0 ? void 0 : baseItemConfig.containerStyle), method.itemConfig.containerStyle),
			titleStyle: _objectSpread2(_objectSpread2({}, baseItemConfig === null || baseItemConfig === void 0 ? void 0 : baseItemConfig.titleStyle), method.itemConfig.titleStyle),
			iconConfig: _objectSpread2(_objectSpread2({}, baseItemConfig === null || baseItemConfig === void 0 ? void 0 : baseItemConfig.iconConfig), method.itemConfig.iconConfig),
			surchargeConfig: _objectSpread2(_objectSpread2({}, baseItemConfig === null || baseItemConfig === void 0 ? void 0 : baseItemConfig.surchargeConfig), method.itemConfig.surchargeConfig),
			actionConfig: _objectSpread2(_objectSpread2(_objectSpread2({}, baseItemConfig === null || baseItemConfig === void 0 ? void 0 : baseItemConfig.actionConfig), method.itemConfig.actionConfig), {}, {
				buttonStyle: _objectSpread2(_objectSpread2({}, baseItemConfig === null || baseItemConfig === void 0 || (_baseItemConfig$actio = baseItemConfig.actionConfig) === null || _baseItemConfig$actio === void 0 ? void 0 : _baseItemConfig$actio.buttonStyle), (_method$itemConfig$ac = method.itemConfig.actionConfig) === null || _method$itemConfig$ac === void 0 ? void 0 : _method$itemConfig$ac.buttonStyle),
				arrowStyle: _objectSpread2(_objectSpread2({}, baseItemConfig === null || baseItemConfig === void 0 || (_baseItemConfig$actio2 = baseItemConfig.actionConfig) === null || _baseItemConfig$actio2 === void 0 ? void 0 : _baseItemConfig$actio2.arrowStyle), (_method$itemConfig$ac2 = method.itemConfig.actionConfig) === null || _method$itemConfig$ac2 === void 0 ? void 0 : _method$itemConfig$ac2.arrowStyle)
			}, effectiveIsRadioMode ? { style: "radio" } : {})
		};
	};
	/**
	* 底部渐变按钮样式
	*/
	const getBottomGradientStyle = () => {
		var _scrollButtonStyle$he;
		const baseStyle = {
			position: "absolute",
			bottom: 0,
			left: 0,
			right: 0,
			height: (_scrollButtonStyle$he = scrollButtonStyle === null || scrollButtonStyle === void 0 ? void 0 : scrollButtonStyle.height) !== null && _scrollButtonStyle$he !== void 0 ? _scrollButtonStyle$he : 50,
			background: "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #A78BE1 100%)",
			zIndex: 10,
			opacity: showBottomGradient ? 1 : 0,
			display: showBottomGradient ? "flex" : "none",
			transition: "opacity 0.3s ease",
			justifyContent: "center",
			alignItems: "center",
			cursor: "pointer",
			border: "none"
		};
		if (scrollButtonStyle) {
			if (scrollButtonStyle.height !== void 0) baseStyle.height = scrollButtonStyle.height;
			if (scrollButtonStyle.backgroundColor) baseStyle.background = scrollButtonStyle.backgroundColor;
			if (scrollButtonStyle.border) baseStyle.border = scrollButtonStyle.border;
			else {
				if (scrollButtonStyle.borderWidth !== void 0) baseStyle.borderWidth = scrollButtonStyle.borderWidth;
				if (scrollButtonStyle.borderColor) baseStyle.borderColor = scrollButtonStyle.borderColor;
				if (scrollButtonStyle.borderStyle) baseStyle.borderStyle = scrollButtonStyle.borderStyle;
			}
			if (scrollButtonStyle.padding !== void 0) baseStyle.padding = scrollButtonStyle.padding;
			if (scrollButtonStyle.borderRadius !== void 0) baseStyle.borderRadius = scrollButtonStyle.borderRadius;
		}
		return baseStyle;
	};
	/**
	* 获取容器样式
	*/
	const getContainerStyle = () => {
		if (!containerStyle) return {};
		const style = {};
		if (containerStyle.backgroundColor) style.backgroundColor = containerStyle.backgroundColor;
		if (containerStyle.border) style.border = containerStyle.border;
		else {
			if (containerStyle.borderWidth) style.borderWidth = containerStyle.borderWidth;
			if (containerStyle.borderColor) style.borderColor = containerStyle.borderColor;
			if (containerStyle.borderStyle) style.borderStyle = containerStyle.borderStyle;
		}
		if (containerStyle.padding !== void 0) style.padding = containerStyle.padding;
		if (containerStyle.borderRadius !== void 0) style.borderRadius = containerStyle.borderRadius;
		return style;
	};
	const contextValue = {
		amountSymbol,
		customAmount,
		selectedId: currentSelectedId,
		disabled,
		isRadioMode: effectiveIsRadioMode,
		itemConfig,
		getText,
		onSelect: handlePaymentSelect,
		onEdit
	};
	return /* @__PURE__ */ React.createElement(PaymentListProvider, { value: contextValue }, /* @__PURE__ */ React.createElement("div", {
		className: classNames("pisell-payment-list", { "pisell-payment-list-disabled": disabled }, className),
		style
	}, (slots === null || slots === void 0 ? void 0 : slots.top) && /* @__PURE__ */ React.createElement("div", { className: "pisell-payment-list-slot-top" }, slots.top), /* @__PURE__ */ React.createElement("div", {
		className: "pisell-payment-list-scroll-container",
		style: _objectSpread2({
			position: "relative",
			height: "100%",
			maxHeight,
			overflow: "hidden",
			display: "flex",
			flexDirection: "row"
		}, getContainerStyle())
	}, (slots === null || slots === void 0 ? void 0 : slots.left) && /* @__PURE__ */ React.createElement("div", { className: "pisell-payment-list-slot-left" }, slots.left), /* @__PURE__ */ React.createElement("div", { style: {
		flex: 1,
		position: "relative",
		height: "100%",
		overflow: "hidden"
	} }, /* @__PURE__ */ React.createElement("div", {
		ref: containerRef,
		className: classNames("pisell-payment-list-scroll-content", { "pisell-payment-list-hide-scrollbar": !showScrollbar }),
		style: {
			height: "100%",
			overflowY: "auto",
			overflowX: "hidden",
			scrollbarWidth: showScrollbar ? "auto" : "none",
			msOverflowStyle: showScrollbar ? "auto" : "none"
		}
	}, /* @__PURE__ */ React.createElement("div", {
		ref: contentRef,
		className: classNames("pisell-payment-list-grid-container", getColumnClassName()),
		style: getGridStyle()
	}, children ? children : paymentMethods.map((method) => {
		const currentItemConfig = getItemConfig(method);
		const isSelected = currentSelectedId ? method.id === currentSelectedId : false;
		return /* @__PURE__ */ React.createElement(PisellPaymentListItem, {
			key: method.id,
			method,
			amountSymbol,
			customAmount,
			disabled,
			selected: isSelected,
			onSelect: handlePaymentSelect,
			onEdit,
			getText,
			containerStyle: currentItemConfig === null || currentItemConfig === void 0 ? void 0 : currentItemConfig.containerStyle,
			titleStyle: currentItemConfig === null || currentItemConfig === void 0 ? void 0 : currentItemConfig.titleStyle,
			iconConfig: currentItemConfig === null || currentItemConfig === void 0 ? void 0 : currentItemConfig.iconConfig,
			surchargeConfig: currentItemConfig === null || currentItemConfig === void 0 ? void 0 : currentItemConfig.surchargeConfig,
			actionConfig: currentItemConfig === null || currentItemConfig === void 0 ? void 0 : currentItemConfig.actionConfig
		});
	}))), (scrollButtonStyle === null || scrollButtonStyle === void 0 ? void 0 : scrollButtonStyle.show) && isScrollable && /* @__PURE__ */ React.createElement("button", {
		style: getBottomGradientStyle(),
		onClick: scrollToBottom,
		onMouseDown: (e) => e.preventDefault(),
		"aria-label": "滚动到底部"
	}, showBottomGradient && (() => {
		const iconStyle = {
			fontSize: scrollButtonStyle.iconSize || 36,
			color: scrollButtonStyle.iconColor || "#5D3F9F"
		};
		if (scrollButtonStyle.icon) return /* @__PURE__ */ React.createElement("div", { style: iconStyle }, scrollButtonStyle.icon);
		return /* @__PURE__ */ React.createElement("div", { style: iconStyle }, /* @__PURE__ */ React.createElement(ChevronDownDouble, null));
	})())), (slots === null || slots === void 0 ? void 0 : slots.right) && /* @__PURE__ */ React.createElement("div", { className: "pisell-payment-list-slot-right" }, slots.right)), (slots === null || slots === void 0 ? void 0 : slots.bottom) && /* @__PURE__ */ React.createElement("div", { className: "pisell-payment-list-slot-bottom" }, slots.bottom)));
}
//#endregion
export { PisellPaymentList as default };
