function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useRef, useEffect, useState } from 'react';
import "./index.less";
import { ChevronDownDouble } from '@pisell/icon';
var ScrollableList = function ScrollableList(_ref) {
  var children = _ref.children,
    _ref$height = _ref.height,
    height = _ref$height === void 0 ? '100%' : _ref$height,
    maxHeight = _ref.maxHeight,
    _ref$gradientHeight = _ref.gradientHeight,
    gradientHeight = _ref$gradientHeight === void 0 ? 40 : _ref$gradientHeight,
    _ref$gradientColor = _ref.gradientColor,
    gradientColor = _ref$gradientColor === void 0 ? 'rgba(255, 255, 255, 0.9)' : _ref$gradientColor,
    _ref$containerStyle = _ref.containerStyle,
    containerStyle = _ref$containerStyle === void 0 ? {} : _ref$containerStyle,
    _ref$contentStyle = _ref.contentStyle,
    contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
    _ref$gradientStyle = _ref.gradientStyle,
    gradientStyle = _ref$gradientStyle === void 0 ? {} : _ref$gradientStyle,
    _ref$showScrollbar = _ref.showScrollbar,
    showScrollbar = _ref$showScrollbar === void 0 ? false : _ref$showScrollbar,
    onScroll = _ref.onScroll,
    onScrollableChange = _ref.onScrollableChange,
    _ref$columnCount = _ref.columnCount,
    columnCount = _ref$columnCount === void 0 ? 1 : _ref$columnCount,
    _ref$columnGap = _ref.columnGap,
    columnGap = _ref$columnGap === void 0 ? 16 : _ref$columnGap,
    _ref$rowGap = _ref.rowGap,
    rowGap = _ref$rowGap === void 0 ? 16 : _ref$rowGap,
    _ref$minColumnWidth = _ref.minColumnWidth,
    minColumnWidth = _ref$minColumnWidth === void 0 ? 200 : _ref$minColumnWidth;
  var containerRef = useRef(null);
  var contentRef = useRef(null);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isScrollable = _useState2[0],
    setIsScrollable = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    showBottomGradient = _useState4[0],
    setShowBottomGradient = _useState4[1];

  // 根据列数获取对应的CSS类名
  var getColumnClassName = function 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';
    }
  };

  // 计算grid样式
  var getGridStyle = function getGridStyle() {
    var style = {};

    // 设置gap样式（行间距和列间距）
    style.gap = "".concat(rowGap, "px ").concat(columnGap, "px");

    // 如果是自适应列，设置gridTemplateColumns
    if (columnCount === 'auto') {
      style.gridTemplateColumns = "repeat(auto-fit, minmax(".concat(minColumnWidth, "px, 1fr))");
    }
    return style;
  };

  // 检查是否需要滚动
  var checkScrollable = function checkScrollable() {
    if (containerRef.current && contentRef.current) {
      var containerHeight = containerRef.current.clientHeight;
      var contentHeight = contentRef.current.scrollHeight;
      var scrollTop = containerRef.current.scrollTop;

      // 在flex布局中，容器高度可能需要时间来计算
      // 如果容器高度异常小，跳过这次检测
      if (containerHeight < 50) {
        return;
      }
      var maxScrollTop = contentHeight - containerHeight;
      var needsScroll = contentHeight > containerHeight + 10; // 添加10px容错

      setIsScrollable(needsScroll);
      if (needsScroll) {
        // 检查是否显示底部渐变（未滚动到底部）
        setShowBottomGradient(scrollTop < maxScrollTop - 5);
      } else {
        setShowBottomGradient(false);
      }

      // 通知父组件是否需要滚动
      onScrollableChange === null || onScrollableChange === void 0 || onScrollableChange(needsScroll);
    }
  };

  // 处理滚动事件
  var handleScroll = function handleScroll(event) {
    checkScrollable();
    // 只有当传入的是React事件时才调用onScroll回调
    if (onScroll && event instanceof Event && event.target) {
      // 创建一个React.UIEvent兼容的事件对象
      var reactEvent = _objectSpread(_objectSpread({}, event), {}, {
        currentTarget: event.target,
        target: event.target
      });
      onScroll(reactEvent);
    }
  };

  // 监听内容变化和容器大小变化
  useEffect(function () {
    // 多次检测，确保flex布局完全稳定
    var timeoutIds = [];

    // 第一次检测 - 等待初始渲染
    timeoutIds.push(setTimeout(function () {
      checkScrollable();
    }, 100));

    // 第二次检测 - 等待flex布局稳定
    timeoutIds.push(setTimeout(function () {
      checkScrollable();
    }, 300));

    // 第三次检测 - 最终确认
    timeoutIds.push(setTimeout(function () {
      checkScrollable();
    }, 500));

    // 使用 ResizeObserver 监听容器大小变化
    var resizeObserver = new ResizeObserver(function () {
      // 延迟执行，避免多次快速调用
      setTimeout(function () {
        checkScrollable();
      }, 100);
    });

    // 添加滚动事件监听器
    var container = containerRef.current;
    if (container) {
      resizeObserver.observe(container);
      container.addEventListener('scroll', handleScroll);
    }
    if (contentRef.current) {
      resizeObserver.observe(contentRef.current);
    }
    return function () {
      timeoutIds.forEach(function (id) {
        return clearTimeout(id);
      });
      resizeObserver.disconnect();
      if (container) {
        container.removeEventListener('scroll', handleScroll);
      }
    };
  }, [children]);

  // 滚动到底部的函数
  var scrollToBottom = function scrollToBottom() {
    if (containerRef.current) {
      containerRef.current.scrollTo({
        top: containerRef.current.scrollHeight,
        behavior: 'smooth'
      });
    }
  };

  // 底部渐变样式
  var bottomGradientStyle = _objectSpread({
    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);

  // 容器样式
  var finalContainerStyle = _objectSpread({
    position: 'relative',
    // 在flex布局中，需要设置明确的高度限制
    height: containerStyle !== null && containerStyle !== void 0 && containerStyle.flex ? '100%' : height,
    maxHeight: maxHeight,
    overflow: 'hidden',
    display: 'flex',
    flexDirection: 'column'
  }, containerStyle);

  // 内容区域样式
  var finalContentStyle = _objectSpread(_objectSpread({
    height: '100%',
    overflowY: 'auto',
    // 始终启用滚动，让浏览器处理
    overflowX: 'hidden',
    scrollbarWidth: showScrollbar ? 'auto' : 'none',
    msOverflowStyle: showScrollbar ? 'auto' : 'none'
  }, contentStyle), showScrollbar ? {} : {
    '&::WebkitScrollbar': {
      display: 'none'
    }
  });
  return /*#__PURE__*/React.createElement("div", {
    style: finalContainerStyle
  }, /*#__PURE__*/React.createElement("div", {
    ref: containerRef,
    style: finalContentStyle,
    className: showScrollbar ? '' : 'scrollable-list-hide-scrollbar'
  }, /*#__PURE__*/React.createElement("div", {
    ref: contentRef,
    className: "scrollable-list-multi-column-container ".concat(getColumnClassName()),
    style: getGridStyle()
  }, children)), isScrollable && /*#__PURE__*/React.createElement("button", {
    style: _objectSpread(_objectSpread({}, bottomGradientStyle), {}, {
      width: '100%',
      border: 'none',
      background: 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #A78BE1 100%)'
    }, gradientStyle),
    onClick: scrollToBottom,
    onMouseDown: function onMouseDown(e) {
      return e.preventDefault();
    } // 防止点击时产生焦点变化
    ,
    "aria-label": "\u6EDA\u52A8\u5230\u5E95\u90E8"
  }, showBottomGradient && /*#__PURE__*/React.createElement(ChevronDownDouble, {
    style: {
      fontSize: 36,
      color: '#5D3F9F'
    }
  })));
};
export default ScrollableList;