const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _pisell_icon = require("@pisell/icon");
require("./index.less");
//#region src/components/checkout/components/ScrollableList/index.tsx
const ScrollableList = ({ children, height = "100%", maxHeight, gradientHeight = 40, gradientColor = "rgba(255, 255, 255, 0.9)", containerStyle = {}, contentStyle = {}, gradientStyle = {}, showScrollbar = false, onScroll, onScrollableChange, columnCount = 1, columnGap = 16, rowGap = 16, minColumnWidth = 200 }) => {
	const containerRef = (0, react.useRef)(null);
	const contentRef = (0, react.useRef)(null);
	const [isScrollable, setIsScrollable] = (0, react.useState)(false);
	const [showBottomGradient, setShowBottomGradient] = (0, react.useState)(false);
	const getColumnClassName = () => {
		if (columnCount === "auto") return "scrollable-list-auto-column";
		switch (columnCount) {
			case 1: return "scrollable-list-single-column";
			case 2: return "scrollable-list-two-column";
			case 3: return "scrollable-list-three-column";
			case 4: return "scrollable-list-four-column";
			case 5: return "scrollable-list-five-column";
			case 6: return "scrollable-list-six-column";
			default: return "scrollable-list-single-column";
		}
	};
	const getGridStyle = () => {
		const style = {};
		style.gap = `${rowGap}px ${columnGap}px`;
		if (columnCount === "auto") style.gridTemplateColumns = `repeat(auto-fit, minmax(${minColumnWidth}px, 1fr))`;
		return style;
	};
	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(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, event), {}, {
			currentTarget: event.target,
			target: event.target
		}));
	};
	(0, react.useEffect)(() => {
		const timeoutIds = [];
		timeoutIds.push(setTimeout(() => {
			checkScrollable();
		}, 100));
		timeoutIds.push(setTimeout(() => {
			checkScrollable();
		}, 300));
		timeoutIds.push(setTimeout(() => {
			checkScrollable();
		}, 500));
		const resizeObserver = new ResizeObserver(() => {
			setTimeout(() => {
				checkScrollable();
			}, 100);
		});
		const container = containerRef.current;
		if (container) {
			resizeObserver.observe(container);
			container.addEventListener("scroll", handleScroll);
		}
		if (contentRef.current) resizeObserver.observe(contentRef.current);
		return () => {
			timeoutIds.forEach((id) => clearTimeout(id));
			resizeObserver.disconnect();
			if (container) container.removeEventListener("scroll", handleScroll);
		};
	}, [children]);
	const scrollToBottom = () => {
		if (containerRef.current) containerRef.current.scrollTo({
			top: containerRef.current.scrollHeight,
			behavior: "smooth"
		});
	};
	const bottomGradientStyle = require_objectSpread2._objectSpread2({
		position: "absolute",
		bottom: 0,
		left: 0,
		right: 0,
		height: gradientHeight,
		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"
	}, gradientStyle);
	const finalContainerStyle = require_objectSpread2._objectSpread2({
		position: "relative",
		height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.flex) ? "100%" : height,
		maxHeight,
		overflow: "hidden",
		display: "flex",
		flexDirection: "column"
	}, containerStyle);
	const finalContentStyle = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({
		height: "100%",
		overflowY: "auto",
		overflowX: "hidden",
		scrollbarWidth: showScrollbar ? "auto" : "none",
		msOverflowStyle: showScrollbar ? "auto" : "none"
	}, contentStyle), showScrollbar ? {} : { "&::WebkitScrollbar": { display: "none" } });
	return /* @__PURE__ */ react.default.createElement("div", { style: finalContainerStyle }, /* @__PURE__ */ react.default.createElement("div", {
		ref: containerRef,
		style: finalContentStyle,
		className: showScrollbar ? "" : "scrollable-list-hide-scrollbar"
	}, /* @__PURE__ */ react.default.createElement("div", {
		ref: contentRef,
		className: `scrollable-list-multi-column-container ${getColumnClassName()}`,
		style: getGridStyle()
	}, children)), isScrollable && /* @__PURE__ */ react.default.createElement("button", {
		style: require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, bottomGradientStyle), {}, {
			width: "100%",
			border: "none",
			background: "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #A78BE1 100%)"
		}, gradientStyle),
		onClick: scrollToBottom,
		onMouseDown: (e) => e.preventDefault(),
		"aria-label": "滚动到底部"
	}, showBottomGradient && /* @__PURE__ */ react.default.createElement(_pisell_icon.ChevronDownDouble, { style: {
		fontSize: 36,
		color: "#5D3F9F"
	} })));
};
//#endregion
exports.default = ScrollableList;
