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/PisellTabbar2/components/TabbarLevel.tsx
var TabbarLevel_exports = {};
__export(TabbarLevel_exports, {
  default: () => TabbarLevel_default
});
module.exports = __toCommonJS(TabbarLevel_exports);
var import_react = __toESM(require("react"));
var import_PisellSuperTabs = __toESM(require("../../PisellSuperTabs"));
var import_PisellCards = __toESM(require("../../PisellCards"));
var import_iconfont = __toESM(require("../../iconfont"));
var import_constants = require("../constants");
var TabbarLevel = (0, import_react.memo)((props) => {
  const {
    skuId,
    dataSource,
    activePanelKey,
    level,
    setActivePanelKey,
    expand,
    handleExpand,
    renderChildren,
    levelConfig: customLevelConfig,
    expandConfig: customExpandConfig,
    superTabsProps,
    positionId,
    level2PositionId,
    panelVisible
  } = props;
  const levelConfig = {
    ...import_constants.DEFAULT_LEVEL_CONFIG[level],
    ...customLevelConfig
  };
  const expandConfig = customExpandConfig || (0, import_constants.getExpandConfig)();
  const renderLevel1Card = (cardProps) => {
    var _a;
    const { dataSource: itemData } = cardProps;
    let _text = itemData.name;
    let _icon = itemData.icon;
    if (itemData.key === "expand") {
      _text = expandConfig[expand ? "active" : "inactive"].text;
      _icon = expandConfig[expand ? "active" : "inactive"].icon;
    }
    return /* @__PURE__ */ import_react.default.createElement(
      import_PisellCards.default.GraphicTextCard,
      {
        ...cardProps,
        text: _text,
        icon: _icon,
        variant: "vertical-image",
        widthMode: "fixed",
        width: levelConfig.cardWidth,
        graphicConfig: {
          width: "100%",
          height: levelConfig.cardHeight,
          background: "#fff",
          iconSize: 30
        },
        style: {
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          background: "#fff",
          borderRadius: 8,
          border: `none`
        },
        textConfig: {
          textAlign: "center",
          color: "#fff",
          fontWeight: 400
        },
        active: {
          value: true,
          style: {
            ...(_a = cardProps.active) == null ? void 0 : _a.style,
            border: `none`,
            color: "#5D3F9F"
          }
        }
      }
    );
  };
  const renderLevel1NormalCard = (cardProps) => {
    var _a;
    const { dataSource: itemData } = cardProps;
    return /* @__PURE__ */ import_react.default.createElement(
      import_PisellCards.default.GraphicTextCard,
      {
        ...cardProps,
        text: itemData.name,
        image: itemData.icon,
        variant: "card",
        widthMode: "fixed",
        width: levelConfig.cardWidth,
        textConfig: {
          color: "#FFF",
          maxLines: 2,
          ellipsis: true
        },
        active: {
          ...cardProps.active,
          style: {
            ...(_a = cardProps.active) == null ? void 0 : _a.style,
            color: "#000000",
            border: `none`,
            background: "#ffffff"
          }
        },
        style: {
          backgroundClip: "padding-box",
          border: `none`,
          background: "transparent"
        },
        graphicConfig: {
          aliWidth: 100,
          width: "100%",
          height: `${levelConfig.cardHeight}px`,
          dataSource: {
            alt: itemData.icon ? void 0 : itemData.name,
            text: itemData.name === "All" ? "All" : void 0
          }
        }
      }
    );
  };
  const renderLevelNCard = (cardProps) => {
    var _a;
    const { dataSource: itemData } = cardProps;
    let _text = itemData.name;
    let _icon = itemData.icon;
    if (itemData.key === "expand") {
      _text = expandConfig[expand ? "active" : "inactive"].text;
      _icon = expandConfig[expand ? "active" : "inactive"].icon;
    }
    return /* @__PURE__ */ import_react.default.createElement(
      import_PisellCards.default.TextCard,
      {
        ...cardProps,
        text: _text,
        variant: "outlined",
        widthMode: "fixed",
        prefixIcon: itemData.key === "expand" ? /* @__PURE__ */ import_react.default.createElement(
          import_iconfont.default,
          {
            type: expandConfig[expand ? "active" : "inactive"].icon,
            style: { color: "#fff", fontSize: 20 }
          }
        ) : void 0,
        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"
          }
        }
      }
    );
  };
  const renderLevelNNormalCard = (cardProps) => {
    var _a;
    const { dataSource: itemData } = cardProps;
    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: "transparent"
        },
        width: levelConfig.cardWidth,
        active: {
          ...cardProps.active,
          style: {
            ...(_a = cardProps.active) == null ? void 0 : _a.style,
            color: "#000000",
            background: "#ffffff"
          }
        }
      }
    );
  };
  const renderLevelNNormalCard3 = (cardProps) => {
    var _a;
    const { dataSource: itemData } = cardProps;
    return /* @__PURE__ */ import_react.default.createElement(
      import_PisellCards.default.TextCard,
      {
        ...cardProps,
        text: itemData.name,
        variant: "filled",
        widthMode: "fixed",
        textConfig: {
          textAlign: "center",
          color: "#FFF",
          maxLines: 2,
          ellipsis: true
        },
        style: {
          height: levelConfig.cardHeight,
          borderRadius: "88px",
          background: "#292929",
          minWidth: 100
        },
        width: levelConfig.cardWidth,
        active: {
          ...cardProps.active,
          style: {
            ...(_a = cardProps.active) == null ? void 0 : _a.style,
            color: "#000000",
            background: "#ffffff"
          }
        }
      }
    );
  };
  const renderItem = (itemProps) => {
    const { dataSource: itemData } = itemProps;
    if (itemData == null ? void 0 : itemData.customClick) {
      return /* @__PURE__ */ import_react.default.createElement(
        import_PisellCards.default.MultilevelCard,
        {
          ...itemProps,
          card: (cardProps) => {
            if (level === "level1") {
              return renderLevel1Card(cardProps);
            }
            return renderLevelNCard(cardProps);
          },
          onClick: handleExpand
        }
      );
    }
    let panelStyle = {};
    if (itemProps.dataSource.childrenMaxLevel >= 2) {
      panelStyle = {
        ...superTabsProps == null ? void 0 : superTabsProps.panelStyle,
        ...panelVisible !== void 0 ? { transform: panelVisible ? "translateX(0)" : "translateX(110%)" } : {}
      };
    }
    return /* @__PURE__ */ import_react.default.createElement(
      import_PisellCards.default.MultilevelCard,
      {
        ...itemProps,
        panelWidthMode: "auto",
        card: (cardProps) => {
          if (level === "level1") {
            return renderLevel1NormalCard(cardProps);
          }
          if (level === "level3") {
            return renderLevelNNormalCard3(cardProps);
          }
          return renderLevelNNormalCard(cardProps);
        },
        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 renderChildren == null ? void 0 : renderChildren(panelProps);
          }
          return null;
        },
        panelStyle,
        panelContainer: (panelProps) => {
          var _a;
          const childrenMaxLevel = ((_a = panelProps.dataSource) == null ? void 0 : _a.childrenMaxLevel) || 2;
          let _positionId = positionId || "";
          if (level2PositionId && childrenMaxLevel < 2) {
            _positionId = level2PositionId;
          }
          if (_positionId) {
            return document.querySelector(_positionId);
          }
          return null;
        }
      }
    );
  };
  return /* @__PURE__ */ import_react.default.createElement(
    import_PisellSuperTabs.default,
    {
      id: skuId,
      tabItemStyle: {},
      dataSource,
      value: activePanelKey,
      onChange: setActivePanelKey,
      rowKey: "id",
      className: superTabsProps == null ? void 0 : superTabsProps.className,
      style: {
        flex: 1,
        background: levelConfig.superTabsBg,
        ...(superTabsProps == null ? void 0 : superTabsProps.style) || {}
      },
      gridProps: {
        direction: "horizontal",
        gap: 4,
        wrap: expand ? "wrap" : "nowrap",
        ...(superTabsProps == null ? void 0 : superTabsProps.gridProps) || {}
      },
      scrollViewProps: {
        style: {
          padding: "4px 8px"
        },
        overflow: !expand ? "x" : "hidden",
        scrollbarStyle: "none",
        scrollActionsConfig: {
          type: "lrArrows",
          show: true
        },
        ...(superTabsProps == null ? void 0 : superTabsProps.scrollViewProps) || {}
      },
      renderItem
    }
  );
});
TabbarLevel.displayName = "TabbarLevel";
var TabbarLevel_default = TabbarLevel;
