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/PisellTabbar3/PisellTabbar.tsx
var PisellTabbar_exports = {};
__export(PisellTabbar_exports, {
  default: () => PisellTabbar_default
});
module.exports = __toCommonJS(PisellTabbar_exports);
var import_react = __toESM(require("react"));
var import_classnames = __toESM(require("classnames"));
var import_PisellSuperTabs = __toESM(require("../PisellSuperTabs"));
var import_PisellCards = __toESM(require("../PisellCards"));
var import_iconfont = __toESM(require("../iconfont"));
var import_locales = require("../../locales");
var import_mock = __toESM(require("./mock"));
var import_PisellTabbar = require("./PisellTabbar.less");
var DEFAULT_LEVEL_CONFIG = {
  level1: {
    superTabsBg: "#3b2865",
    cardWidth: 100,
    cardHeight: 60,
    paddingLeft: 0
  },
  level2: {
    superTabsBg: "#7F56DA",
    cardWidth: 120,
    cardHeight: 56,
    paddingLeft: 20
  },
  level3: {
    superTabsBg: "#344054",
    cardWidth: 120,
    cardHeight: 56,
    paddingLeft: 40
  }
};
var getExpandConfig = () => ({
  active: {
    icon: "pisell2-minimize-01",
    text: (0, import_locales.getText)("pisell-tabbar-minimize")
  },
  inactive: {
    icon: "pisell2-expand-01",
    text: (0, import_locales.getText)("pisell-tabbar-expand")
  }
});
var DEFAULT_ITEMS = {
  all: {
    id: 0,
    shop_id: 9,
    parent_id: 0,
    name: "All",
    slug: "All",
    icon: ""
  },
  search: {
    id: -1,
    shop_id: 9,
    parent_id: 0,
    name: "Search",
    slug: "Search",
    key: "search",
    icon: "",
    customClick: true
  },
  expand: {
    id: -2,
    shop_id: 9,
    parent_id: 0,
    key: "expand",
    icon: "pisell2-expand-01",
    name: "Expand",
    slug: "expand",
    customClick: true
  }
};
var LEVEL_ADD_ITEMS = {
  level1: ["expand"],
  level2: ["expand", "all"],
  level3: ["expand", "all"]
};
var addDataSourceItemsByKey = (dataSource, keys) => {
  return [...keys.map((key) => DEFAULT_ITEMS[key]), ...dataSource];
};
var getDefaultActiveKey = (dataSource, rowKey) => {
  var _a;
  const _activeKey = [];
  if (dataSource.length) {
    _activeKey.push(
      dataSource[0][rowKey]
    );
    if ((_a = dataSource[0].children) == null ? void 0 : _a.length) {
      _activeKey.push(0);
    }
  }
  return _activeKey;
};
var PisellTabbar = (props) => {
  const {
    dataSource = (props == null ? void 0 : props.__designMode) ? import_mock.default : import_mock.default,
    value,
    onChange,
    className,
    style,
    levelConfig: customLevelConfig,
    expandConfig: customExpandConfig,
    maxLevel = 3
  } = props;
  const [activeKey, _setActiveKey] = (0, import_react.useState)(
    value || getDefaultActiveKey(dataSource, "id")
  );
  const [expand, setExpand] = (0, import_react.useState)({
    level1: false,
    level2: false,
    level3: false
  });
  (0, import_react.useEffect)(() => {
    if (value && JSON.stringify(value) !== JSON.stringify(activeKey)) {
      _setActiveKey(value);
    }
  }, [JSON.stringify(value)]);
  const expandConfig = customExpandConfig || getExpandConfig();
  const level1Config = {
    ...DEFAULT_LEVEL_CONFIG.level1,
    ...customLevelConfig == null ? void 0 : customLevelConfig.level1
  };
  const level2Config = {
    ...DEFAULT_LEVEL_CONFIG.level2,
    ...customLevelConfig == null ? void 0 : customLevelConfig.level2
  };
  const level3Config = {
    ...DEFAULT_LEVEL_CONFIG.level3,
    ...customLevelConfig == null ? void 0 : customLevelConfig.level3
  };
  const setActiveKey = (0, import_react.useCallback)(
    (level, key, cKey) => {
      const newActiveKey = [...activeKey];
      newActiveKey.splice(level + 1);
      newActiveKey[level] = String(key);
      if (cKey !== void 0) {
        newActiveKey[level + 1] = String(cKey);
      }
      _setActiveKey(newActiveKey);
      onChange == null ? void 0 : onChange(newActiveKey);
    },
    [activeKey, onChange]
  );
  const level1DataSource = (0, import_react.useMemo)(
    () => addDataSourceItemsByKey(dataSource, LEVEL_ADD_ITEMS.level1),
    [dataSource]
  );
  const renderLevel1ExpandCard = (cardProps) => {
    var _a;
    const isExpanded = expand.level1;
    const _text = expandConfig[isExpanded ? "active" : "inactive"].text;
    const _icon = expandConfig[isExpanded ? "active" : "inactive"].icon;
    return /* @__PURE__ */ import_react.default.createElement(
      import_PisellCards.default.GraphicTextCard,
      {
        ...cardProps,
        text: _text,
        icon: _icon,
        variant: "vertical-image",
        widthMode: "fixed",
        width: level1Config.cardWidth,
        graphicConfig: {
          width: "100%",
          height: level1Config.cardHeight,
          background: "#fff",
          iconSize: 30
        },
        style: {
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          background: "#fff",
          borderRadius: 8,
          border: `4px solid ${level1Config.superTabsBg}`
        },
        textConfig: {
          textAlign: "center",
          color: "#fff",
          fontWeight: 400
        },
        active: {
          value: true,
          style: {
            ...(_a = cardProps.active) == null ? void 0 : _a.style,
            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: level1Config.cardWidth,
        textConfig: {
          color: "#FFF"
        },
        active: {
          ...cardProps.active,
          style: {
            ...(_a = cardProps.active) == null ? void 0 : _a.style,
            color: "#000000"
          }
        },
        style: {
          backgroundClip: "padding-box"
        },
        graphicConfig: {
          width: "100%",
          height: `${level1Config.cardHeight}px`,
          dataSource: {
            alt: itemData.icon ? void 0 : itemData.name,
            text: itemData.name === "All" ? "All" : void 0
          }
        }
      }
    );
  };
  const renderLevel1Item = (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) => renderLevel1ExpandCard(cardProps),
          onClick: () => {
            setExpand((prev) => ({ ...prev, level1: !prev.level1 }));
          }
        }
      );
    }
    return /* @__PURE__ */ import_react.default.createElement(
      import_PisellCards.default.MultilevelCard,
      {
        ...itemProps,
        card: (cardProps) => renderLevel1NormalCard(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) || maxLevel < 2) {
            return null;
          }
          const level2Data = addDataSourceItemsByKey(
            panelProps.dataSource.children,
            LEVEL_ADD_ITEMS.level2
          );
          return /* @__PURE__ */ import_react.default.createElement(
            import_PisellSuperTabs.default,
            {
              id: `sku-list-tabbar-${panelProps.dataSource.id}`,
              tabItemStyle: {},
              dataSource: level2Data,
              value: String(activeKey[1]),
              onChange: (key, item) => {
                var _a2;
                setActiveKey(1, key, ((_a2 = item == null ? void 0 : item.children) == null ? void 0 : _a2.length) ? 0 : void 0);
              },
              rowKey: "id",
              style: {
                flex: 1,
                background: level2Config.superTabsBg
              },
              gridProps: {
                direction: "horizontal",
                gap: 4,
                wrap: expand.level2 ? "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: {
                style: {
                  padding: "4px 8px"
                },
                overflow: !expand.level2 ? "x" : "hidden",
                scrollbarStyle: "none",
                scrollActionsConfig: {
                  type: "lrArrows",
                  show: true
                }
              },
              renderItem: (level2ItemProps) => {
                const level2ItemData = level2ItemProps.dataSource;
                if (level2ItemData == null ? void 0 : level2ItemData.customClick) {
                  const isExpanded = expand.level2;
                  const _text = expandConfig[isExpanded ? "active" : "inactive"].text;
                  const _icon = expandConfig[isExpanded ? "active" : "inactive"].icon;
                  return /* @__PURE__ */ import_react.default.createElement(
                    import_PisellCards.default.MultilevelCard,
                    {
                      ...level2ItemProps,
                      card: (cardProps) => {
                        var _a2;
                        return /* @__PURE__ */ import_react.default.createElement(
                          import_PisellCards.default.TextCard,
                          {
                            ...cardProps,
                            text: _text,
                            variant: "outlined",
                            widthMode: "fixed",
                            prefixIcon: /* @__PURE__ */ import_react.default.createElement(
                              import_iconfont.default,
                              {
                                type: expandConfig[isExpanded ? "active" : "inactive"].icon,
                                style: { color: "#fff", fontSize: 20 }
                              }
                            ),
                            textConfig: {
                              textAlign: "center",
                              color: "#FFF",
                              flex: "none"
                            },
                            style: {
                              borderRadius: "8px",
                              background: "rgba(0, 0, 0, 0.50)",
                              display: "flex",
                              alignItems: "center",
                              justifyContent: "center",
                              height: level2Config.cardHeight
                            },
                            width: level2Config.cardWidth,
                            active: {
                              ...cardProps.active,
                              style: {
                                ...(_a2 = cardProps.active) == null ? void 0 : _a2.style,
                                color: "#000000",
                                background: "#ffffff"
                              }
                            }
                          }
                        );
                      },
                      onClick: () => {
                        setExpand((prev) => ({
                          ...prev,
                          level2: !prev.level2
                        }));
                      }
                    }
                  );
                }
                return /* @__PURE__ */ import_react.default.createElement(
                  import_PisellCards.default.MultilevelCard,
                  {
                    ...level2ItemProps,
                    card: (cardProps) => {
                      var _a2;
                      return /* @__PURE__ */ import_react.default.createElement(
                        import_PisellCards.default.TextCard,
                        {
                          ...cardProps,
                          text: level2ItemData.name,
                          variant: "outlined",
                          widthMode: "fixed",
                          textConfig: {
                            textAlign: "center",
                            color: "#FFF",
                            maxLines: 2,
                            ellipsis: true
                          },
                          style: {
                            height: level2Config.cardHeight,
                            borderRadius: "8px",
                            background: "rgba(0, 0, 0, 0.50)"
                          },
                          width: level2Config.cardWidth,
                          active: {
                            ...cardProps.active,
                            style: {
                              ...(_a2 = cardProps.active) == null ? void 0 : _a2.style,
                              color: "#000000",
                              background: "#ffffff"
                            }
                          }
                        }
                      );
                    },
                    panel: (level2PanelProps) => {
                      var _a2, _b2;
                      if (!((_b2 = (_a2 = level2PanelProps == null ? void 0 : level2PanelProps.dataSource) == null ? void 0 : _a2.children) == null ? void 0 : _b2.length) || maxLevel < 3) {
                        return null;
                      }
                      const level3Data = addDataSourceItemsByKey(
                        level2PanelProps.dataSource.children,
                        LEVEL_ADD_ITEMS.level3
                      );
                      return /* @__PURE__ */ import_react.default.createElement(
                        import_PisellSuperTabs.default,
                        {
                          id: `sku-list-tabbar-${level2PanelProps.dataSource.id}`,
                          tabItemStyle: {},
                          dataSource: level3Data,
                          value: String(activeKey[2]),
                          onChange: (key) => {
                            setActiveKey(2, key);
                          },
                          rowKey: "id",
                          style: {
                            flex: 1,
                            background: level3Config.superTabsBg
                          },
                          gridProps: {
                            direction: "horizontal",
                            gap: 4,
                            wrap: expand.level3 ? "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: {
                            style: {
                              padding: "4px 8px"
                            },
                            overflow: !expand.level3 ? "x" : "hidden",
                            scrollbarStyle: "none",
                            scrollActionsConfig: {
                              type: "lrArrows",
                              show: true
                            }
                          },
                          renderItem: (level3ItemProps) => {
                            const level3ItemData = level3ItemProps.dataSource;
                            if (level3ItemData == null ? void 0 : level3ItemData.customClick) {
                              const isExpanded = expand.level3;
                              const _text = expandConfig[isExpanded ? "active" : "inactive"].text;
                              const _icon = expandConfig[isExpanded ? "active" : "inactive"].icon;
                              return /* @__PURE__ */ import_react.default.createElement(
                                import_PisellCards.default.MultilevelCard,
                                {
                                  ...level3ItemProps,
                                  card: (cardProps) => {
                                    var _a3;
                                    return /* @__PURE__ */ import_react.default.createElement(
                                      import_PisellCards.default.TextCard,
                                      {
                                        ...cardProps,
                                        text: _text,
                                        variant: "outlined",
                                        widthMode: "fixed",
                                        prefixIcon: /* @__PURE__ */ import_react.default.createElement(
                                          import_iconfont.default,
                                          {
                                            type: expandConfig[isExpanded ? "active" : "inactive"].icon,
                                            style: {
                                              color: "#fff",
                                              fontSize: 20
                                            }
                                          }
                                        ),
                                        textConfig: {
                                          textAlign: "center",
                                          color: "#FFF",
                                          flex: "none"
                                        },
                                        style: {
                                          borderRadius: "8px",
                                          background: "rgba(0, 0, 0, 0.50)",
                                          display: "flex",
                                          alignItems: "center",
                                          justifyContent: "center",
                                          height: level3Config.cardHeight
                                        },
                                        width: level3Config.cardWidth,
                                        active: {
                                          ...cardProps.active,
                                          style: {
                                            ...(_a3 = cardProps.active) == null ? void 0 : _a3.style,
                                            color: "#000000",
                                            background: "#ffffff"
                                          }
                                        }
                                      }
                                    );
                                  },
                                  onClick: () => {
                                    setExpand((prev) => ({
                                      ...prev,
                                      level3: !prev.level3
                                    }));
                                  }
                                }
                              );
                            }
                            return /* @__PURE__ */ import_react.default.createElement(
                              import_PisellCards.default.MultilevelCard,
                              {
                                ...level3ItemProps,
                                card: (cardProps) => {
                                  var _a3;
                                  return /* @__PURE__ */ import_react.default.createElement(
                                    import_PisellCards.default.TextCard,
                                    {
                                      ...cardProps,
                                      text: level3ItemData.name,
                                      variant: "outlined",
                                      widthMode: "fixed",
                                      textConfig: {
                                        textAlign: "center",
                                        color: "#FFF",
                                        maxLines: 2,
                                        ellipsis: true
                                      },
                                      style: {
                                        height: level3Config.cardHeight,
                                        borderRadius: "8px",
                                        background: "rgba(0, 0, 0, 0.50)"
                                      },
                                      width: level3Config.cardWidth,
                                      active: {
                                        ...cardProps.active,
                                        style: {
                                          ...(_a3 = cardProps.active) == null ? void 0 : _a3.style,
                                          color: "#000000",
                                          background: "#ffffff"
                                        }
                                      }
                                    }
                                  );
                                },
                                panelContainer: () => document.querySelector(
                                  `.pisell-super-tabs-slot-bottom-sku-list-tabbar-${level2PanelProps.dataSource.id}`
                                )
                              }
                            );
                          }
                        }
                      );
                    },
                    panelContainer: () => document.querySelector(
                      `.pisell-super-tabs-slot-bottom-sku-list-tabbar-${panelProps.dataSource.id}`
                    )
                  }
                );
              }
            }
          );
        },
        panelContainer: () => document.querySelector(
          ".pisell-super-tabs-slot-bottom-sku-list-tabbar"
        )
      }
    );
  };
  return dataSource.length ? /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-tabbar", className), style }, /* @__PURE__ */ import_react.default.createElement(
    import_PisellSuperTabs.default,
    {
      id: "sku-list-tabbar",
      tabItemStyle: {},
      dataSource: level1DataSource,
      value: String(activeKey[0]),
      onChange: (key, item) => {
        var _a;
        setActiveKey(0, key, ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? 0 : void 0);
      },
      rowKey: "id",
      style: {
        flex: 1,
        background: level1Config.superTabsBg
      },
      gridProps: {
        direction: "horizontal",
        gap: 4,
        wrap: expand.level1 ? "wrap" : "nowrap"
      },
      scrollViewProps: {
        style: {
          padding: "4px 8px"
        },
        overflow: !expand.level1 ? "x" : "hidden",
        scrollbarStyle: "none",
        scrollActionsConfig: {
          type: "lrArrows",
          show: true
        }
      },
      renderItem: renderLevel1Item
    }
  )) : null;
};
PisellTabbar.displayName = "PisellTabbar";
var PisellTabbar_default = PisellTabbar;
