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/PisellTabbar/PisellTabbar.tsx
var PisellTabbar_exports = {};
__export(PisellTabbar_exports, {
  default: () => PisellTabbar_default
});
module.exports = __toCommonJS(PisellTabbar_exports);
var import_classnames = __toESM(require("classnames"));
var import_react = __toESM(require("react"));
var import_locales = require("../../locales");
var import_PisellCards = __toESM(require("../PisellCards"));
var import_PisellSuperTabs = __toESM(require("../PisellSuperTabs"));
var import_iconfont = __toESM(require("../iconfont"));
var import_pisellFind = require("../pisellFind");
var import_PisellTabbar = require("./PisellTabbar.less");
var import_constants = require("./constants");
var import_hooks = require("./hooks");
var import_mock = __toESM(require("./mock"));
var import_utils = require("./utils");
var import_ahooks = require("ahooks");
var TABBAR_SCROLL_VIEW_PADDING_STYLE = { padding: "4px 8px" };
var TABBAR_SCROLL_ACTIONS_CONFIG = {
  type: "lrArrows",
  show: true
};
var buildTabbarScrollViewProps = (isExpanded) => ({
  style: TABBAR_SCROLL_VIEW_PADDING_STYLE,
  overflow: isExpanded ? "hidden" : "x",
  scrollbarStyle: "none",
  scrollActionsConfig: TABBAR_SCROLL_ACTIONS_CONFIG
});
var PisellTabbar = (0, import_react.forwardRef)(
  (props, ref) => {
    const {
      dataSource = (props == null ? void 0 : props.__designMode) ? import_mock.default : import_mock.default,
      value,
      onChange,
      className,
      style,
      levelConfig: customLevelConfig,
      expandConfig: customExpandConfig,
      maxLevel = 3,
      onSearch
    } = props;
    const containerRef = (0, import_react.useRef)(null);
    const searchRef = (0, import_react.useRef)(null);
    const {
      activeKey,
      setActiveKey,
      getActiveKey,
      _setActiveKey,
      setCacheActiveKey,
      resetActiveKey,
      getCacheActiveKey
    } = (0, import_hooks.useActiveKey)({
      initialActiveKey: value || (0, import_utils.getDefaultActiveKey)(dataSource, "id"),
      onChange
    });
    const level1Value = (0, import_react.useMemo)(() => {
      return getActiveKey(0);
    }, [activeKey]);
    const level2Value = (0, import_react.useMemo)(() => {
      return getActiveKey(1);
    }, [activeKey]);
    const level3Value = (0, import_react.useMemo)(() => {
      return getActiveKey(2);
    }, [activeKey]);
    const { expand, toggleExpand, getExpand } = (0, import_hooks.useExpand)();
    const expandConfigData = customExpandConfig || (0, import_constants.getExpandConfig)();
    const openSearchMode = (0, import_ahooks.useMemoizedFn)(() => {
      setCacheActiveKey(activeKey);
      _setActiveKey([]);
      onChange == null ? void 0 : onChange([]);
    });
    const closeSearchMode = (0, import_ahooks.useMemoizedFn)(() => {
      onSearch == null ? void 0 : onSearch("");
      resetActiveKey();
    });
    (0, import_react.useImperativeHandle)(ref, () => {
      var _a;
      if (props == null ? void 0 : props.__designMode) {
        return containerRef.current;
      }
      return {
        closeSearchMode: (_a = searchRef == null ? void 0 : searchRef.current) == null ? void 0 : _a.close
      };
    });
    (0, import_react.useEffect)(() => {
      if (value) {
        _setActiveKey(value);
      }
    }, [JSON.stringify(value)]);
    const getLevelConfig = (0, import_react.useCallback)(
      (level) => {
        return {
          ...import_constants.DEFAULT_LEVEL_CONFIG[level],
          ...customLevelConfig == null ? void 0 : customLevelConfig[level]
        };
      },
      [customLevelConfig]
    );
    const handleLevel1Change = (0, import_react.useCallback)(
      (key, item) => {
        var _a;
        setActiveKey(0, key, ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? 0 : void 0);
      },
      [setActiveKey]
    );
    const handleLevel2Change = (0, import_react.useCallback)(
      (key, item) => {
        var _a;
        setActiveKey(1, key, ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? 0 : void 0);
      },
      [setActiveKey]
    );
    const handleLevel3Change = (0, import_react.useCallback)(
      (key) => {
        setActiveKey(2, key);
      },
      [setActiveKey]
    );
    const renderLevelNCard = (0, import_react.useCallback)(
      (cardProps, level) => {
        var _a;
        const { dataSource: itemData } = cardProps;
        const levelConfig = getLevelConfig(level);
        return /* @__PURE__ */ import_react.default.createElement(
          import_PisellCards.default.TextCard,
          {
            text: itemData.text,
            ...cardProps,
            variant: "outlined",
            widthMode: "fixed",
            textConfig: {
              textAlign: "center",
              color: "#FFF",
              flex: "none"
            },
            style: {
              borderRadius: "8px",
              background: "rgba(0, 0, 0, 0.50)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              height: levelConfig.cardHeight
            },
            width: levelConfig.cardWidth,
            active: {
              ...cardProps.active,
              style: {
                ...(_a = cardProps.active) == null ? void 0 : _a.style,
                color: "#000000",
                background: "#ffffff"
              }
            }
          }
        );
      },
      [activeKey, getLevelConfig, getExpand, expandConfigData]
    );
    const renderLevelNNormalCard = (0, import_react.useCallback)(
      (cardProps, level) => {
        var _a;
        const { dataSource: itemData } = cardProps;
        const levelConfig = getLevelConfig(level);
        return /* @__PURE__ */ import_react.default.createElement(
          import_PisellCards.default.TextCard,
          {
            ...cardProps,
            text: itemData.name,
            variant: "outlined",
            widthMode: "fixed",
            textConfig: {
              textAlign: "center",
              color: "#FFF",
              maxLines: 2,
              ellipsis: true
            },
            style: {
              height: levelConfig.cardHeight,
              borderRadius: "8px",
              background: "rgba(0, 0, 0, 0.50)"
            },
            width: levelConfig.cardWidth,
            active: {
              ...cardProps.active,
              style: {
                ...(_a = cardProps.active) == null ? void 0 : _a.style,
                color: "#000000",
                background: "#ffffff"
              }
            }
          }
        );
      },
      [activeKey, getLevelConfig]
    );
    const level1DataSource = (0, import_react.useMemo)(
      () => (0, import_utils.addDataSourceItemsByKey)(dataSource, import_constants.LEVEL_ADD_ITEMS.level1),
      [dataSource]
    );
    const level2Expand = getExpand("level2");
    const level3Expand = getExpand("level3");
    const level3ScrollViewProps = (0, import_react.useMemo)(
      () => buildTabbarScrollViewProps(level3Expand),
      [level3Expand]
    );
    const level2ScrollViewProps = (0, import_react.useMemo)(
      () => buildTabbarScrollViewProps(level2Expand),
      [level2Expand]
    );
    const renderLevel3 = (0, import_react.useCallback)(
      (panelProps2) => {
        if (maxLevel < 3) return null;
        let _dataSource2 = panelProps2.dataSource.children || [];
        if (_dataSource2.length) {
          _dataSource2 = (0, import_utils.addDataSourceItemsByKey)(
            _dataSource2,
            import_constants.LEVEL_ADD_ITEMS.level3
          );
        }
        const level3Config = getLevelConfig("level3");
        const renderLevel3Item = (itemProps) => {
          const { dataSource: itemData } = itemProps;
          if (itemData == null ? void 0 : itemData.customClick) {
            if (itemProps.dataSource.key === "expand") {
              return renderExpand(itemProps, "level3");
            }
          }
          return /* @__PURE__ */ import_react.default.createElement(
            import_PisellCards.default.MultilevelCard,
            {
              ...itemProps,
              card: (cardProps) => renderLevelNNormalCard(cardProps, "level3"),
              panelContainer: () => document.querySelector(
                `.pisell-super-tabs-slot-bottom-sku-list-tabbar-${panelProps2.dataSource.id}`
              )
            }
          );
        };
        return /* @__PURE__ */ import_react.default.createElement(
          import_PisellSuperTabs.default,
          {
            id: `sku-list-tabbar-${panelProps2.dataSource.id}`,
            tabItemStyle: {},
            isControlled: true,
            dataSource: _dataSource2,
            value: level3Value,
            onChange: handleLevel3Change,
            rowKey: "id",
            style: {
              flex: 1,
              background: level3Config.superTabsBg
            },
            gridProps: {
              direction: "horizontal",
              gap: 4,
              wrap: level3Expand ? "wrap" : "nowrap",
              startSlot: /* @__PURE__ */ import_react.default.createElement("div", { style: { paddingLeft: level3Config.paddingLeft } }, /* @__PURE__ */ import_react.default.createElement(
                import_iconfont.default,
                {
                  type: "pisell2-trend-down-01",
                  style: { color: "#fff", fontSize: 24, marginRight: 8 }
                }
              ))
            },
            scrollViewProps: level3ScrollViewProps,
            renderItem: renderLevel3Item
          }
        );
      },
      [
        activeKey,
        maxLevel,
        getActiveKey,
        handleLevel3Change,
        level3Expand,
        level3ScrollViewProps,
        toggleExpand,
        getLevelConfig,
        renderLevelNCard,
        renderLevelNNormalCard
      ]
    );
    const renderLevel2 = (0, import_react.useCallback)(
      (panelProps) => {
        if (maxLevel < 2) return null;
        let _dataSource = panelProps.dataSource.children || [];
        if (_dataSource.length) {
          _dataSource = (0, import_utils.addDataSourceItemsByKey)(
            _dataSource,
            import_constants.LEVEL_ADD_ITEMS.level2
          );
        }
        const level2Config = getLevelConfig("level2");
        const renderLevel2Item = (itemProps) => {
          const { dataSource: itemData } = itemProps;
          if (itemData == null ? void 0 : itemData.customClick) {
            if (itemProps.dataSource.key === "expand") {
              return renderExpand(itemProps, "level2");
            }
          }
          return /* @__PURE__ */ import_react.default.createElement(
            import_PisellCards.default.MultilevelCard,
            {
              ...itemProps,
              card: (cardProps) => renderLevelNNormalCard(cardProps, "level2"),
              panel: (innerPanelProps) => {
                var _a, _b;
                if ((_b = (_a = innerPanelProps == null ? void 0 : innerPanelProps.dataSource) == null ? void 0 : _a.children) == null ? void 0 : _b.length) {
                  return renderLevel3(innerPanelProps);
                }
                return null;
              },
              panelContainer: () => document.querySelector(
                `.pisell-super-tabs-slot-bottom-sku-list-tabbar-${panelProps.dataSource.id}`
              )
            }
          );
        };
        return /* @__PURE__ */ import_react.default.createElement(
          import_PisellSuperTabs.default,
          {
            id: `sku-list-tabbar-${panelProps.dataSource.id}`,
            tabItemStyle: {},
            dataSource: _dataSource,
            value: level2Value,
            isControlled: true,
            onChange: handleLevel2Change,
            rowKey: "id",
            style: {
              flex: 1,
              background: level2Config.superTabsBg
            },
            gridProps: {
              direction: "horizontal",
              gap: 4,
              wrap: level2Expand ? "wrap" : "nowrap",
              startSlot: /* @__PURE__ */ import_react.default.createElement("div", { style: { paddingLeft: level2Config.paddingLeft } }, /* @__PURE__ */ import_react.default.createElement(
                import_iconfont.default,
                {
                  type: "pisell2-trend-down-01",
                  style: { color: "#fff", fontSize: 24, marginRight: 8 }
                }
              ))
            },
            scrollViewProps: level2ScrollViewProps,
            renderItem: renderLevel2Item
          }
        );
      },
      [
        activeKey,
        maxLevel,
        getActiveKey,
        handleLevel2Change,
        level2Expand,
        level2ScrollViewProps,
        toggleExpand,
        getLevelConfig,
        renderLevelNCard,
        renderLevelNNormalCard,
        renderLevel3
      ]
    );
    const renderExpand = (0, import_react.useCallback)(
      (itemProps, level) => {
        return /* @__PURE__ */ import_react.default.createElement(
          import_PisellCards.default.MultilevelCard,
          {
            ...itemProps,
            card: (cardProps) => {
              let _cardProps = {
                ...cardProps
              };
              const isExpand = getExpand(level);
              _cardProps.text = expandConfigData[isExpand ? "active" : "inactive"].text;
              _cardProps.prefixIcon = /* @__PURE__ */ import_react.default.createElement(
                import_iconfont.default,
                {
                  type: expandConfigData[isExpand ? "active" : "inactive"].icon,
                  style: { color: "#fff", fontSize: 20 }
                }
              );
              return renderLevelNCard(_cardProps, level);
            },
            onClick: () => {
              toggleExpand(level);
            }
          }
        );
      },
      [expand]
    );
    const renderSearch = (0, import_react.useCallback)(
      (itemProps, level) => {
        return /* @__PURE__ */ import_react.default.createElement(
          import_pisellFind.PisellFind,
          {
            showHistory: false,
            modalWidth: "100%",
            ref: searchRef,
            onSearch: (e) => {
              onSearch == null ? void 0 : onSearch(e);
            },
            getContainer: () => {
              return document.querySelector("#sku-list-tabbar") || document.body;
            },
            modalStyle: {
              width: "100%"
            },
            onOpen: openSearchMode,
            onClose: closeSearchMode,
            trigger: /* @__PURE__ */ import_react.default.createElement(
              import_PisellCards.default.MultilevelCard,
              {
                ...itemProps,
                card: (cardProps) => {
                  let _cardProps = {
                    ...cardProps,
                    text: /* @__PURE__ */ import_react.default.createElement(
                      "div",
                      {
                        style: {
                          display: "flex",
                          alignItems: "center",
                          gap: 4
                        }
                      },
                      /* @__PURE__ */ import_react.default.createElement(
                        import_iconfont.default,
                        {
                          type: "pisell2-search-lg",
                          style: { color: "#fff", fontSize: 20 }
                        }
                      ),
                      /* @__PURE__ */ import_react.default.createElement(
                        import_iconfont.default,
                        {
                          type: "pisell2-scan",
                          style: { color: "#fff", fontSize: 20 }
                        }
                      ),
                      /* @__PURE__ */ import_react.default.createElement("span", null, (0, import_locales.getText)("table-filter-find"))
                    )
                  };
                  return renderLevelNCard(_cardProps, level);
                }
              }
            )
          }
        );
      },
      [activeKey]
    );
    const renderLevel1Item = (0, import_ahooks.useMemoizedFn)(
      (itemProps) => {
        const { dataSource: itemData } = itemProps;
        if (itemData == null ? void 0 : itemData.customClick) {
          if (itemProps.dataSource.key === "search") {
            return renderSearch(itemProps, "level1");
          }
          if (itemProps.dataSource.key === "expand") {
            return renderExpand(itemProps, "level1");
          }
          return null;
        }
        return /* @__PURE__ */ import_react.default.createElement(
          import_PisellCards.default.MultilevelCard,
          {
            ...itemProps,
            card: (cardProps) => renderLevelNNormalCard(cardProps, "level1"),
            panel: (panelProps) => {
              var _a, _b;
              if ((_b = (_a = panelProps == null ? void 0 : panelProps.dataSource) == null ? void 0 : _a.children) == null ? void 0 : _b.length) {
                return renderLevel2(panelProps);
              }
              return null;
            },
            panelContainer: () => document.querySelector(
              `.pisell-super-tabs-slot-bottom-sku-list-tabbar`
            )
          }
        );
      }
    );
    const level1Config = (0, import_react.useMemo)(
      () => getLevelConfig("level1"),
      [getLevelConfig]
    );
    const level1Expand = getExpand("level1");
    const level1ScrollViewProps = (0, import_react.useMemo)(
      () => buildTabbarScrollViewProps(level1Expand),
      [level1Expand]
    );
    const tabbarDom = (0, import_react.useMemo)(
      () => dataSource.length ? /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: (0, import_classnames.default)("pisell-tabbar", className),
          style,
          ref: containerRef
        },
        /* @__PURE__ */ import_react.default.createElement(
          import_PisellSuperTabs.default,
          {
            isControlled: true,
            id: "sku-list-tabbar",
            tabItemStyle: {},
            dataSource: level1DataSource,
            value: level1Value,
            onChange: handleLevel1Change,
            rowKey: "id",
            style: {
              flex: 1,
              background: level1Config.superTabsBg
            },
            gridProps: {
              direction: "horizontal",
              gap: 4,
              wrap: level1Expand ? "wrap" : "nowrap"
            },
            scrollViewProps: level1ScrollViewProps,
            renderItem: renderLevel1Item
          }
        )
      ) : null,
      [
        dataSource.length,
        className,
        style,
        level1DataSource,
        activeKey,
        expand,
        maxLevel,
        level1Value,
        handleLevel1Change,
        level1Config,
        level1Expand,
        level1ScrollViewProps,
        renderLevel1Item
      ]
    );
    return tabbarDom;
  }
);
PisellTabbar.displayName = "PisellTabbar";
var PisellTabbar_default = PisellTabbar;
