"use strict";
const React = require("react");
const is = require("../../_util/is.js");
const resizeObserver = require("../../_util/resizeObserver.js");
const dropdownIcon = require("./dropdown-icon.js");
const tabNavIcon = require("./tab-nav-icon.js");
const tabTitle = require("./tab-title.js");
const index$1 = require("../../../icon/react-icon/IconPlus/index.js");
const classNames = require("../../_util/classNames.js");
const style = require("../../_util/style.js");
const utils = require("../utils.js");
const tabs = require("../tabs.js");
const tabInk = require("./tab-ink.js");
const iconHover = require("../../_class/icon-hover.js");
const useDomSize = require("../hook/useDomSize.js");
const throttleByRaf = require("../../_util/throttleByRaf.js");
const useHeaderScroll = require("../hook/useHeaderScroll.js");
const index = require("../../ConfigProvider/index.js");
const emotionReactJsxRuntime_browser_esm = require("../../../../../../../@emotion_react@11.10.4_3toe27fv7etiytxb5kxc7fxaw4/node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js");
const _interopDefaultLegacy = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
var __assign = globalThis && globalThis.__assign || function() {
  __assign = Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s)
        if (Object.prototype.hasOwnProperty.call(s, p))
          t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __read = globalThis && globalThis.__read || function(o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m)
    return o;
  var i = m.call(o), r, ar = [], e;
  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
      ar.push(r.value);
  } catch (error) {
    e = {
      error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"]))
        m.call(i);
    } finally {
      if (e)
        throw e.error;
    }
  }
  return ar;
};
var DIRECTION_VERTICAL = "vertical";
var ALIGN_RIGHT = "right";
var ALIGN_LEFT = "left";
var SCROLL_MAP = {
  delete: true,
  add: true
};
var getHeaderStyle = function(_a) {
  var direction = _a.direction, _b = _a.align, align = _b === void 0 ? ALIGN_LEFT : _b, headerOffset = _a.headerOffset;
  var value = "translateX(" + -headerOffset + "px)";
  if (align === ALIGN_RIGHT) {
    value = "translateX(" + headerOffset + "px)";
  }
  if (direction === DIRECTION_VERTICAL) {
    value = "translateY(" + -headerOffset + "px)";
  }
  return style.setTransformStyle(value);
};
var getCurrentHeaderOffset = function(_a) {
  var direction = _a.direction, _b = _a.align, align = _b === void 0 ? ALIGN_LEFT : _b, headerDom = _a.headerDom, headerWrapperDom = _a.headerWrapperDom;
  var diffStyle = utils.getRectDiff(headerDom, headerWrapperDom);
  if (direction === DIRECTION_VERTICAL)
    return -diffStyle.top;
  if (align === ALIGN_RIGHT)
    return diffStyle.right;
  return -diffStyle.left;
};
var TabHeader = React__default.default.forwardRef(function(props, ref) {
  var _a, _b;
  var ctxProps = React.useContext(tabs.TabsContext);
  var rtl = React.useContext(index.ConfigContext).rtl;
  var mergeProps = __assign(__assign({}, props), ctxProps);
  var _c = __read(useDomSize(), 3), headerWrapperRef = _c[0], headerWrapperSize = _c[1], setHeaderWrapperSize = _c[2];
  var _d = __read(useDomSize(), 3), headerRef = _d[0], headerSize = _d[1], setHeaderSize = _d[2];
  var _e = __read(useDomSize(), 3), scrollWrapperRef = _e[0], scrollWrapperSize = _e[1], setScrollWrapperSize = _e[2];
  var _f = __read(useDomSize(), 3), extraRef = _f[0], extraSize = _f[1], setExtraSize = _f[2];
  var titleRef = React.useRef({});
  var _g = __read(React.useState(0), 2), headerOffset = _g[0], setHeaderOffset = _g[1];
  var _h = __read(React.useState(true), 2), shouldScroll = _h[0], setShouldScroll = _h[1];
  var paneChildren = mergeProps.paneChildren, editable = mergeProps.editable, prefixCls = mergeProps.prefixCls, onAddTab = mergeProps.onAddTab, direction = mergeProps.direction, _j = mergeProps.type, type = _j === void 0 ? "line" : _j, _k = mergeProps.overflow, overflow = _k === void 0 ? "scroll" : _k, activeTab = mergeProps.activeTab, showAddButton = mergeProps.showAddButton, _l = mergeProps.size, size = _l === void 0 ? "default" : _l, style2 = mergeProps.style, tabPosition = mergeProps.tabPosition, className = mergeProps.className, extra = mergeProps.extra, animation = mergeProps.animation, icons = mergeProps.icons, deleteButton = mergeProps.deleteButton, addButton = mergeProps.addButton, renderTabTitle = mergeProps.renderTabTitle, scrollAfterEdit = mergeProps.scrollAfterEdit, _m = mergeProps.scrollPosition, scrollPosition = _m === void 0 ? "auto" : _m;
  var scrollConfig = is.isObject(scrollAfterEdit) ? __assign(__assign({}, SCROLL_MAP), scrollAfterEdit) : SCROLL_MAP;
  var _o = __read(rtl ? [ALIGN_RIGHT, ALIGN_LEFT] : [ALIGN_LEFT, ALIGN_RIGHT], 2), left = _o[0], right = _o[1];
  var align = type === "capsule" ? right : left;
  var isScrollable = React.useMemo(function() {
    var headerContentHeight = scrollWrapperSize.height - extraSize.height;
    var headerContentWidth = scrollWrapperSize.width - extraSize.width;
    var res = mergeProps.direction === "vertical" ? headerContentHeight < headerSize.height : headerContentWidth < headerSize.width;
    return res;
  }, [mergeProps.direction, scrollWrapperSize, extraSize, headerSize]);
  var updateScrollWrapperSize = function() {
    if (scrollWrapperRef.current) {
      var dom = scrollWrapperRef.current;
      setScrollWrapperSize({
        height: dom.offsetHeight,
        width: dom.offsetWidth
      });
    }
  };
  var onWrapperResize = throttleByRaf(function(entry) {
    updateScrollWrapperSize();
    var dom = entry[0] && entry[0].target;
    if (dom) {
      setHeaderWrapperSize({
        height: dom.offsetHeight,
        width: dom.offsetWidth,
        domRect: dom.getBoundingClientRect()
      });
    }
  });
  var onHeaderResize = throttleByRaf(function(entry) {
    var dom = entry[0] && entry[0].target;
    if (dom) {
      setHeaderSize({
        height: dom.offsetHeight,
        width: dom.offsetWidth,
        domRect: dom.getBoundingClientRect()
      });
    }
  });
  var onExtraResize = throttleByRaf(function(entry) {
    var dom = entry[0] && entry[0].target;
    if (dom) {
      setExtraSize({
        height: dom.offsetHeight,
        width: dom.offsetWidth,
        domRect: dom.getBoundingClientRect()
      });
    }
  });
  var getValidOffset = React.useCallback(function(offset) {
    var maxOffset = direction === DIRECTION_VERTICAL ? headerSize.height - headerWrapperSize.height : headerSize.width - headerWrapperSize.width;
    var validOffset = offset;
    validOffset = Math.min(maxOffset, validOffset);
    validOffset = Math.max(validOffset, 0);
    return validOffset;
  }, [direction, headerSize, headerWrapperSize]);
  var updateHeaderOffset = function(offset) {
    var nextOffset = getValidOffset(offset);
    if (nextOffset !== headerOffset) {
      setHeaderOffset(nextOffset);
    }
  };
  React.useEffect(function() {
    return function() {
      onHeaderResize.cancel && onHeaderResize.cancel();
      onWrapperResize.cancel && onWrapperResize.cancel();
    };
  }, []);
  React.useEffect(function() {
    if (!shouldScroll) {
      setShouldScroll(true);
      return;
    }
    var getActiveTabOffset = function() {
      var currentTitleNode = titleRef.current[activeTab];
      if (!currentTitleNode || !isScrollable) {
        return 0;
      }
      var diffStyle = utils.getRectDiff(currentTitleNode, headerWrapperRef.current);
      var currentOffset = getCurrentHeaderOffset({
        direction,
        align,
        headerDom: headerRef.current,
        headerWrapperDom: headerWrapperRef.current
      });
      if (direction === "vertical") {
        var nextOffset_1 = currentOffset;
        var scrollAlign_1 = scrollPosition;
        var topOffset = currentOffset + diffStyle.top;
        var bottomOffset = currentOffset + diffStyle.bottom;
        if (scrollAlign_1 === "auto") {
          scrollAlign_1 = diffStyle.top < 0 ? "start" : diffStyle.bottom > 0 ? "end" : scrollPosition;
        }
        if (scrollAlign_1 === "start") {
          nextOffset_1 = topOffset;
        } else if (scrollAlign_1 === "end") {
          nextOffset_1 = bottomOffset;
        } else if (scrollAlign_1 === "center") {
          nextOffset_1 = topOffset - (diffStyle.top - diffStyle.bottom) / 2;
        } else if (is.isNumber(scrollAlign_1)) {
          nextOffset_1 = Math.max(topOffset - scrollAlign_1, bottomOffset);
        }
        return nextOffset_1;
      }
      if (align === "right") {
        var startOffset_1 = currentOffset - diffStyle.left;
        var endOffset_1 = currentOffset - diffStyle.right;
        var scrollAlign_2 = scrollPosition;
        var nextOffset_2 = currentOffset;
        if (scrollPosition === "auto") {
          scrollAlign_2 = diffStyle.left < 0 ? "start" : diffStyle.right > 0 ? "end" : scrollPosition;
        }
        if (scrollAlign_2 === "start") {
          nextOffset_2 = startOffset_1;
        } else if (scrollAlign_2 === "end") {
          nextOffset_2 = endOffset_1;
        } else if (scrollAlign_2 === "center") {
          nextOffset_2 = startOffset_1 + (diffStyle.left - diffStyle.right) / 2;
        } else if (is.isNumber(scrollAlign_2)) {
          nextOffset_2 = Math.min(startOffset_1 + scrollAlign_2, endOffset_1);
        }
        return nextOffset_2;
      }
      var nextOffset = currentOffset;
      var scrollAlign = scrollPosition;
      var startOffset = currentOffset + diffStyle.left;
      var endOffset = currentOffset + diffStyle.right;
      if (scrollPosition === "auto") {
        scrollAlign = diffStyle.left < 0 ? "start" : diffStyle.right > 0 ? "end" : scrollPosition;
      }
      if (scrollAlign === "start") {
        nextOffset = startOffset;
      } else if (scrollAlign === "end") {
        nextOffset = endOffset;
      } else if (scrollAlign === "center") {
        nextOffset = startOffset - (diffStyle.left - diffStyle.right) / 2;
      } else if (is.isNumber(scrollAlign)) {
        nextOffset = Math.max(startOffset - scrollAlign, endOffset);
      }
      return nextOffset;
    };
    utils.updateScrollOffset(headerWrapperRef.current, direction);
    var offset = getActiveTabOffset();
    offset = getValidOffset(offset);
    setHeaderOffset(offset);
  }, [activeTab, direction, overflow, isScrollable, type, getValidOffset, scrollPosition]);
  var headerStyle = getHeaderStyle({
    direction,
    align,
    headerOffset
  });
  var isDropdown = isScrollable && overflow === "dropdown" && direction !== "vertical";
  var isScroll = isScrollable && !isDropdown;
  var isEditable = editable && (type === "card" || type === "card-gutter" || type === "line");
  var handleDelete = function(child) {
    mergeProps.onDeleteTab && mergeProps.onDeleteTab(child.key);
    setShouldScroll(scrollConfig.delete);
  };
  var handleAdd = function() {
    onAddTab && onAddTab();
    setShouldScroll(scrollConfig.add);
  };
  var renderAddIcon = function(isEditable2) {
    return isEditable2 && showAddButton && /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("div", {
      ...__assign({
        className: prefixCls + "-add-icon",
        "aria-label": "add tab",
        tabIndex: 0,
        role: "button",
        onClick: handleAdd
      }, utils.getKeyDownEvent({
        onPressEnter: handleAdd
      })),
      children: addButton || /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(iconHover, {
        prefix: prefixCls + "-add",
        children: /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("span", {
          className: prefixCls + "-add",
          children: (icons === null || icons === void 0 ? void 0 : icons.add) || /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(index$1, {})
        })
      })
    });
  };
  useHeaderScroll({
    headerWrapperRef,
    headerOffset,
    align,
    direction,
    isScrollable,
    onScroll: function(offset) {
      updateHeaderOffset(offset);
    }
  });
  return /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx("div", {
    className: classNames(prefixCls + "-header-nav", prefixCls + "-header-nav-" + direction, prefixCls + "-header-nav-" + tabPosition, prefixCls + "-header-size-" + size, prefixCls + "-header-nav-" + type, className),
    style: style2,
    ref,
    children: /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsxs("div", {
      className: classNames(prefixCls + "-header-scroll", (_a = {}, _a[prefixCls + "-header-overflow-scroll"] = isScroll, _a[prefixCls + "-header-overflow-dropdown"] = isDropdown, _a)),
      ref: scrollWrapperRef,
      children: [isScroll && /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(tabNavIcon, {
        iconPos: "prev",
        rtl,
        prefixCls,
        currentOffset: headerOffset,
        headerSize,
        headerWrapperSize,
        direction,
        align,
        onChange: updateHeaderOffset
      }), /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(resizeObserver, {
        onResize: onWrapperResize,
        children: /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsxs("div", {
          className: prefixCls + "-header-wrapper",
          ref: headerWrapperRef,
          children: [/* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(resizeObserver, {
            onResize: onHeaderResize,
            children: /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsxs("div", {
              className: classNames(prefixCls + "-header", (_b = {}, _b[prefixCls + "-header-no-padding"] = !props.headerPadding && direction === "horizontal" && ["line", "text"].indexOf(type) > -1, _b)),
              ref: headerRef,
              style: headerStyle,
              children: [paneChildren.map(function(child, index2) {
                return /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(tabTitle, {
                  ...__assign({
                    key: index2,
                    ref: function(node) {
                      titleRef.current[child.key] = node;
                    },
                    tabKey: child.key
                  }, child.props, {
                    prefixCls,
                    onDeleteTab: function() {
                      return handleDelete(child);
                    },
                    renderTitle: props.children || renderTabTitle,
                    onClickTab: function() {
                      mergeProps.onClickTab && mergeProps.onClickTab(child.key);
                    },
                    isActive: activeTab === child.key,
                    editable: isEditable && child.props.closable !== false,
                    deleteIcon: icons === null || icons === void 0 ? void 0 : icons.delete,
                    deleteButton,
                    getIdPrefix: ctxProps.getIdPrefix,
                    index: index2
                  })
                });
              }), type === "line" && /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(tabInk, {
                disabled: !!paneChildren.find(function(child) {
                  return child && child.props && child.props.disabled && child.key === activeTab;
                }),
                prefixCls,
                animation,
                direction,
                getTitleRef: function(key) {
                  return titleRef.current[key];
                },
                activeTab,
                getHeaderRef: function() {
                  return headerRef;
                }
              })]
            })
          }), !isScrollable && renderAddIcon(isEditable)]
        })
      }), isScroll && /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(tabNavIcon, {
        prefixCls,
        rtl,
        currentOffset: headerOffset,
        headerSize,
        headerWrapperSize,
        direction,
        align,
        onChange: updateHeaderOffset
      }), isDropdown && /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(dropdownIcon, {
        onClickTab: mergeProps.onClickTab,
        paneChildren,
        prefixCls,
        currentOffset: headerOffset,
        headerSize,
        headerWrapperSize,
        getTitleRef: function(key) {
          return titleRef.current[key];
        },
        direction
      }), (isEditable && isScrollable || extra) && /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsx(resizeObserver, {
        onResize: onExtraResize,
        children: /* @__PURE__ */ emotionReactJsxRuntime_browser_esm.jsxs("div", {
          className: prefixCls + "-header-extra",
          ref: extraRef,
          children: [isScrollable && renderAddIcon(isEditable), extra]
        })
      })]
    })
  });
});
TabHeader.displayName = "TabHeader";
const TabHeader$1 = TabHeader;
module.exports = TabHeader$1;
//# sourceMappingURL=index.js.map
