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/pisellAnchor/index.tsx
var pisellAnchor_exports = {};
__export(pisellAnchor_exports, {
  default: () => pisellAnchor_default
});
module.exports = __toCommonJS(pisellAnchor_exports);
var import_react = __toESM(require("react"));
var import_classnames = __toESM(require("classnames"));
var import_ahooks = require("ahooks");
var import_ChevronLeft = __toESM(require("@pisell/icon/es/ChevronLeft"));
var import_ChevronRight = __toESM(require("@pisell/icon/es/ChevronRight"));
var import_index = require("./index.less");
var PisellAnchor = ({
  options = [],
  tab,
  className,
  style,
  onChange,
  onTabClick,
  containerRef,
  platform = "pc"
}) => {
  const contentRef = (0, import_react.useRef)(null);
  const isClickScrolling = (0, import_react.useRef)(false);
  const [leftWidth, setLeftWidth] = (0, import_react.useState)(0);
  const [rightWidth, setRightWidth] = (0, import_react.useState)(40);
  const [showButtons, setShowButtons] = (0, import_react.useState)(false);
  (0, import_react.useEffect)(() => {
    if (contentRef.current) {
      const { scrollWidth, clientWidth } = contentRef.current;
      setShowButtons(scrollWidth > clientWidth);
    }
  }, [options]);
  const handleHorizontalScroll = (0, import_ahooks.useDebounceFn)(
    (e) => {
      const target = e.target;
      const { scrollLeft, scrollWidth, clientWidth } = target;
      setLeftWidth(scrollLeft > 0 ? 40 : 0);
      setRightWidth(scrollLeft + clientWidth >= scrollWidth ? 0 : 40);
    },
    { wait: 200 }
  ).run;
  const handleContentScroll = (0, import_ahooks.useDebounceFn)(
    () => {
      if (isClickScrolling.current || !(containerRef == null ? void 0 : containerRef.current)) return;
      const container = containerRef.current;
      const scrollTop = container.scrollTop;
      const containerHeight = container.clientHeight;
      const scrollHeight = container.scrollHeight;
      const isAtBottom = Math.abs(scrollTop + containerHeight - scrollHeight) < 1;
      if (isAtBottom) {
        const lastOption = options[options.length - 1];
        if (lastOption && tab !== lastOption.id) {
          onChange == null ? void 0 : onChange(lastOption.id);
        }
        return;
      }
      let maxVisibleRatio = 0;
      let activeOption = null;
      for (const option of options) {
        const element = document.querySelector(`[data-section="${option.id}"]`);
        if (element instanceof HTMLElement) {
          const elementTop = element.offsetTop;
          const elementHeight = element.offsetHeight;
          const elementBottom = elementTop + elementHeight;
          const visibleTop = Math.max(elementTop, scrollTop);
          const visibleBottom = Math.min(elementBottom, scrollTop + containerHeight);
          const visibleHeight = Math.max(0, visibleBottom - visibleTop);
          const visibleRatio = visibleHeight / elementHeight;
          if (visibleRatio > maxVisibleRatio) {
            maxVisibleRatio = visibleRatio;
            activeOption = option;
          }
        }
      }
      if (activeOption && tab !== activeOption.id) {
        onChange == null ? void 0 : onChange(activeOption.id);
      }
    },
    { wait: 100 }
  ).run;
  (0, import_react.useEffect)(() => {
    const container = containerRef == null ? void 0 : containerRef.current;
    if (!container) return;
    container.addEventListener("scroll", handleContentScroll);
    return () => container.removeEventListener("scroll", handleContentScroll);
  }, [handleContentScroll]);
  const handleOptionClick = (item) => {
    onChange == null ? void 0 : onChange(item.id);
    onTabClick == null ? void 0 : onTabClick();
    const targetElement = document.querySelector(`[data-section="${item.id}"]`);
    if (targetElement instanceof HTMLElement && (containerRef == null ? void 0 : containerRef.current)) {
      isClickScrolling.current = true;
      let scrollDistance = 0;
      for (const option of options) {
        if (option.id === item.id) break;
        const element = document.querySelector(`[data-section="${option.id}"]`);
        if (element instanceof HTMLElement) {
          scrollDistance += element.offsetHeight;
        }
      }
      containerRef.current.scrollTo({
        top: scrollDistance,
        behavior: "smooth"
      });
      setTimeout(() => {
        isClickScrolling.current = false;
      }, 1e3);
    }
  };
  const handlePageChange = (type) => {
    if (contentRef.current) {
      const { scrollLeft, clientWidth } = contentRef.current;
      contentRef.current.scrollTo({
        left: scrollLeft + (type === "left" ? -clientWidth : clientWidth),
        behavior: "smooth"
      });
    }
  };
  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-anchor-tabs", className), style }, showButtons && /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: "pisell-anchor-tabs-btn-left",
      style: { width: leftWidth },
      onClick: () => handlePageChange("left")
    },
    /* @__PURE__ */ import_react.default.createElement(import_ChevronLeft.default, { className: "pisell-anchor-tabs-btn-icon" })
  ), /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      ref: contentRef,
      className: "pisell-anchor-tabs-content",
      onScroll: handleHorizontalScroll
    },
    options.map((item) => /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        key: item.id,
        className: (0, import_classnames.default)("pisell-anchor-tabs-tab", {
          "pisell-anchor-tabs-tab-active": tab === item.id
        }),
        onClick: () => handleOptionClick(item)
      },
      /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-anchor-tabs-tab-content" }, item.name)
    ))
  ), showButtons && /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: "pisell-anchor-tabs-btn-right",
      style: { width: rightWidth },
      onClick: () => handlePageChange("right")
    },
    /* @__PURE__ */ import_react.default.createElement(import_ChevronRight.default, { className: "pisell-anchor-tabs-btn-icon" })
  ));
};
var pisellAnchor_default = PisellAnchor;
