var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/checkout/components/ScrollableList/index.tsx
var ScrollableList_exports = {};
__export(ScrollableList_exports, {
  default: () => ScrollableList_default
});
module.exports = __toCommonJS(ScrollableList_exports);
var import_react = __toESM(require("react"));
var import_index = require("./index.less");
var import_icon = require("@pisell/icon");
var 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, import_react.useRef)(null);
  const contentRef = (0, import_react.useRef)(null);
  const [isScrollable, setIsScrollable] = (0, import_react.useState)(false);
  const [showBottomGradient, setShowBottomGradient] = (0, import_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 ? void 0 : onScrollableChange(needsScroll);
    }
  };
  const handleScroll = (event) => {
    checkScrollable();
    if (onScroll && event instanceof Event && event.target) {
      const reactEvent = {
        ...event,
        currentTarget: event.target,
        target: event.target
      };
      onScroll(reactEvent);
    }
  };
  (0, import_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 = {
    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 = {
    position: "relative",
    // 在flex布局中，需要设置明确的高度限制
    height: (containerStyle == null ? void 0 : containerStyle.flex) ? "100%" : height,
    maxHeight,
    overflow: "hidden",
    display: "flex",
    flexDirection: "column",
    ...containerStyle
  };
  const finalContentStyle = {
    height: "100%",
    overflowY: "auto",
    // 始终启用滚动，让浏览器处理
    overflowX: "hidden",
    scrollbarWidth: showScrollbar ? "auto" : "none",
    msOverflowStyle: showScrollbar ? "auto" : "none",
    ...contentStyle,
    ...showScrollbar ? {} : {
      "&::WebkitScrollbar": {
        display: "none"
      }
    }
  };
  return /* @__PURE__ */ import_react.default.createElement("div", { style: finalContainerStyle }, /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      ref: containerRef,
      style: finalContentStyle,
      className: showScrollbar ? "" : "scrollable-list-hide-scrollbar"
    },
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        ref: contentRef,
        className: `scrollable-list-multi-column-container ${getColumnClassName()}`,
        style: getGridStyle()
      },
      children
    )
  ), isScrollable && /* @__PURE__ */ import_react.default.createElement(
    "button",
    {
      style: {
        ...bottomGradientStyle,
        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__ */ import_react.default.createElement(import_icon.ChevronDownDouble, { style: {
      fontSize: 36,
      color: "#5D3F9F"
    } })
  ));
};
var ScrollableList_default = ScrollableList;
