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, { forwardRef, useCallback, useRef, useState, useEffect } from 'react';
import IntersectionObserverProvider, { IntersectionTrigger } from "../components/IntersectionObserver";
import { TabsStructure, useSelectionIndicator } from "../components/TabsStructure";
import "../components/TabsStructure/TabsStructure.less";
import CategorySkeleton from "./CategorySkeleton";
import { PREFIX } from "../index";
var CategoryTabs = /*#__PURE__*/forwardRef(function (props, ref) {
  var items = props.items,
    activeKey = props.activeKey,
    onChange = props.onChange,
    _props$loading = props.loading,
    loading = _props$loading === void 0 ? false : _props$loading,
    skeleton = props.skeleton;
  var railRef = useRef(null);

  // 使用IntersectionTrigger来优雅地控制滚动状态
  var _useState = useState(true),
    _useState2 = _slicedToArray(_useState, 2),
    isAtStart = _useState2[0],
    setIsAtStart = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isAtEnd = _useState4[0],
    setIsAtEnd = _useState4[1];
  var _useState5 = useState(false),
    _useState6 = _slicedToArray(_useState5, 2),
    needsScrollButtons = _useState6[0],
    setNeedsScrollButtons = _useState6[1];

  // 滚动函数
  var scrollLeft = useCallback(function () {
    if (!railRef.current) return;
    var container = railRef.current;
    var scrollAmount = container.clientWidth * 0.8;
    var newPosition = Math.max(0, container.scrollLeft - scrollAmount);
    container.scrollTo({
      left: newPosition,
      behavior: 'smooth'
    });
  }, []);
  var scrollRight = useCallback(function () {
    if (!railRef.current) return;
    var container = railRef.current;
    var scrollAmount = container.clientWidth * 0.8;
    var maxScroll = container.scrollWidth - container.clientWidth;
    var newPosition = Math.min(maxScroll, container.scrollLeft + scrollAmount);
    container.scrollTo({
      left: newPosition,
      behavior: 'smooth'
    });
  }, []);

  // 检测是否需要滚动按钮
  useEffect(function () {
    var updateScrollButtonsVisibility = function updateScrollButtonsVisibility() {
      if (railRef.current) {
        var _railRef$current = railRef.current,
          scrollWidth = _railRef$current.scrollWidth,
          clientWidth = _railRef$current.clientWidth;
        console.log('检测滚动按钮需求:', {
          scrollWidth: scrollWidth,
          clientWidth: clientWidth,
          needsScroll: scrollWidth > clientWidth
        });
        setNeedsScrollButtons(scrollWidth > clientWidth);
      }
    };
    var resizeObserver = null;

    // 确保DOM已经渲染完成
    var timer = setTimeout(function () {
      var container = railRef.current;
      if (!container) {
        console.log('容器未找到，跳过滚动按钮检测');
        return;
      }
      updateScrollButtonsVisibility();
      resizeObserver = new ResizeObserver(updateScrollButtonsVisibility);
      resizeObserver.observe(container);
    }, 100);
    return function () {
      clearTimeout(timer);
      if (resizeObserver) {
        resizeObserver.disconnect();
      }
    };
  }, [items]); // 依赖items，当标签项变化时重新检测

  // 获取选择指示器和列表容器属性
  var _useSelectionIndicato = useSelectionIndicator(railRef, activeKey || ''),
    selectionIndicatorProps = _useSelectionIndicato.selectionIndicatorProps,
    listContainerProps = _useSelectionIndicato.listContainerProps;

  // 如果正在加载且提供了骨架屏组件，显示骨架屏
  if (loading && skeleton) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, skeleton);
  }
  return /*#__PURE__*/React.createElement(IntersectionObserverProvider, null, items.length > 0 && /*#__PURE__*/React.createElement("div", {
    className: "".concat(PREFIX, "__tabs-wrapper")
  }, /*#__PURE__*/React.createElement(TabsStructure, {
    variant: "pill",
    backgroundVariant: "onPage",
    selectedTab: activeKey
  }, needsScrollButtons && /*#__PURE__*/React.createElement(TabsStructure.ChevronButton, {
    direction: "prev",
    disabled: isAtStart,
    onClick: scrollLeft,
    style: {
      marginRight: '8px'
    }
  }), /*#__PURE__*/React.createElement(TabsStructure.Rail, {
    ref: railRef
  }, /*#__PURE__*/React.createElement(IntersectionTrigger, {
    onShow: function onShow() {
      console.log('is start');
      setIsAtStart(true);
    },
    onHide: function onHide() {
      console.log('is start false');
      setIsAtStart(false);
    },
    style: {
      width: 1,
      height: 1,
      flexShrink: 0,
      background: 'rgba(0,0,0,0)'
    },
    className: "visibility-detector start-detector"
  }), /*#__PURE__*/React.createElement(TabsStructure.SelectionIndicator, selectionIndicatorProps), /*#__PURE__*/React.createElement(TabsStructure.ListContainer, listContainerProps, items.map(function (item) {
    return /*#__PURE__*/React.createElement(TabsStructure.Item, {
      key: item.key,
      tabId: item.key,
      "aria-selected": activeKey === item.key,
      onClick: function onClick() {
        return onChange(item.key);
      },
      className: "tab-item"
    }, item.label);
  })), /*#__PURE__*/React.createElement(IntersectionTrigger, {
    className: "visibility-detector end-detector",
    onShow: function onShow() {
      console.log('is end');
      setIsAtEnd(true);
    },
    onHide: function onHide() {
      console.log('is end false');
      setIsAtEnd(false);
    },
    style: {
      width: 1,
      height: 1,
      flexShrink: 0,
      background: 'rgba(0,0,0,0)'
    }
  })), needsScrollButtons && /*#__PURE__*/React.createElement(TabsStructure.ChevronButton, {
    direction: "next",
    disabled: isAtEnd,
    onClick: scrollRight,
    style: {
      marginLeft: '8px'
    }
  }))));
});
export default CategoryTabs;
export { CategorySkeleton };