function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { memo } from 'react';
import SuperTabs from "../../PisellSuperTabs";
import PisellCards from "../../PisellCards";
import Iconfont from "../../iconfont";
import { DEFAULT_LEVEL_CONFIG, getExpandConfig } from "../constants";

/**
 * Tabbar 层级组件
 * 负责渲染单个层级的 Tab 导航
 */
var TabbarLevel = /*#__PURE__*/memo(function (props) {
  var skuId = props.skuId,
    dataSource = props.dataSource,
    activePanelKey = props.activePanelKey,
    level = props.level,
    setActivePanelKey = props.setActivePanelKey,
    expand = props.expand,
    handleExpand = props.handleExpand,
    renderChildren = props.renderChildren,
    customLevelConfig = props.levelConfig,
    customExpandConfig = props.expandConfig,
    superTabsProps = props.superTabsProps,
    positionId = props.positionId,
    level2PositionId = props.level2PositionId,
    panelVisible = props.panelVisible;

  // 合并配置
  var levelConfig = _objectSpread(_objectSpread({}, DEFAULT_LEVEL_CONFIG[level]), customLevelConfig);
  var expandConfig = customExpandConfig || getExpandConfig();

  /**
   * 渲染 level1 卡片
   */
  var renderLevel1Card = function renderLevel1Card(cardProps) {
    var _cardProps$active;
    var itemData = cardProps.dataSource;
    var _text = itemData.name;
    var _icon = itemData.icon;

    // 处理展开按钮
    if (itemData.key === 'expand') {
      _text = expandConfig[expand ? 'active' : 'inactive'].text;
      _icon = expandConfig[expand ? 'active' : 'inactive'].icon;
    }
    return /*#__PURE__*/React.createElement(PisellCards.GraphicTextCard, _extends({}, 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: _objectSpread(_objectSpread({}, (_cardProps$active = cardProps.active) === null || _cardProps$active === void 0 ? void 0 : _cardProps$active.style), {}, {
          border: "none",
          color: '#5D3F9F'
        })
      }
    }));
  };

  /**
   * 渲染 level1 普通卡片（非自定义点击）
   */
  var renderLevel1NormalCard = function renderLevel1NormalCard(cardProps) {
    var _cardProps$active2;
    var itemData = cardProps.dataSource;
    return /*#__PURE__*/React.createElement(PisellCards.GraphicTextCard, _extends({}, cardProps, {
      text: itemData.name,
      image: itemData.icon,
      variant: "card",
      widthMode: "fixed",
      width: levelConfig.cardWidth,
      textConfig: {
        color: '#FFF',
        maxLines: 2,
        ellipsis: true
      },
      active: _objectSpread(_objectSpread({}, cardProps.active), {}, {
        style: _objectSpread(_objectSpread({}, (_cardProps$active2 = cardProps.active) === null || _cardProps$active2 === void 0 ? void 0 : _cardProps$active2.style), {}, {
          color: '#000000',
          border: "none",
          background: '#ffffff'
        })
      }),
      style: {
        backgroundClip: 'padding-box',
        border: "none",
        background: 'transparent'
      },
      graphicConfig: {
        aliWidth: 100,
        width: '100%',
        height: "".concat(levelConfig.cardHeight, "px"),
        dataSource: {
          alt: itemData.icon ? undefined : itemData.name,
          text: itemData.name === 'All' ? 'All' : undefined
        }
      }
    }));
  };

  /**
   * 渲染 level2 自定义点击卡片
   */
  var renderLevelNCard = function renderLevelNCard(cardProps) {
    var _cardProps$active3;
    var itemData = cardProps.dataSource;
    var _text = itemData.name;
    var _icon = itemData.icon;
    if (itemData.key === 'expand') {
      _text = expandConfig[expand ? 'active' : 'inactive'].text;
      _icon = expandConfig[expand ? 'active' : 'inactive'].icon;
    }
    return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({}, cardProps, {
      text: _text,
      variant: "outlined",
      widthMode: "fixed",
      prefixIcon: itemData.key === 'expand' ? /*#__PURE__*/React.createElement(Iconfont, {
        type: expandConfig[expand ? 'active' : 'inactive'].icon,
        style: {
          color: '#fff',
          fontSize: 20
        }
      }) : undefined,
      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: _objectSpread(_objectSpread({}, cardProps.active), {}, {
        style: _objectSpread(_objectSpread({}, (_cardProps$active3 = cardProps.active) === null || _cardProps$active3 === void 0 ? void 0 : _cardProps$active3.style), {}, {
          color: '#000000',
          background: '#ffffff'
        })
      })
    }));
  };
  /**
   * 渲染 level2 普通卡片
   */
  var renderLevelNNormalCard = function renderLevelNNormalCard(cardProps) {
    var _cardProps$active4;
    var itemData = cardProps.dataSource;
    return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({}, 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: _objectSpread(_objectSpread({}, cardProps.active), {}, {
        style: _objectSpread(_objectSpread({}, (_cardProps$active4 = cardProps.active) === null || _cardProps$active4 === void 0 ? void 0 : _cardProps$active4.style), {}, {
          color: '#000000',
          background: '#ffffff'
        })
      })
    }));
  };
  var renderLevelNNormalCard3 = function renderLevelNNormalCard3(cardProps) {
    var _cardProps$active5;
    var itemData = cardProps.dataSource;
    return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({}, 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: _objectSpread(_objectSpread({}, cardProps.active), {}, {
        style: _objectSpread(_objectSpread({}, (_cardProps$active5 = cardProps.active) === null || _cardProps$active5 === void 0 ? void 0 : _cardProps$active5.style), {}, {
          color: '#000000',
          background: '#ffffff'
        })
      })
    }));
  };

  /**
   * 渲染 Tab 项
   */
  var renderItem = function renderItem(itemProps) {
    var itemData = itemProps.dataSource;

    // 处理自定义点击事件的项（如展开按钮）
    if (itemData !== null && itemData !== void 0 && itemData.customClick) {
      return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
        card: function card(cardProps) {
          if (level === 'level1') {
            return renderLevel1Card(cardProps);
          }
          return renderLevelNCard(cardProps);
        },
        onClick: handleExpand
      }));
    }
    var panelStyle = {};
    if (itemProps.dataSource.childrenMaxLevel >= 2) {
      panelStyle = _objectSpread(_objectSpread({}, superTabsProps === null || superTabsProps === void 0 ? void 0 : superTabsProps.panelStyle), panelVisible !== undefined ? {
        transform: panelVisible ? 'translateX(0)' : 'translateX(110%)'
      } : {});
    }

    // 普通项
    return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
      panelWidthMode: "auto",
      card: function card(cardProps) {
        if (level === 'level1') {
          return renderLevel1NormalCard(cardProps);
        }
        if (level === 'level3') {
          return renderLevelNNormalCard3(cardProps);
        }
        return renderLevelNNormalCard(cardProps);
      },
      panel: function panel(panelProps) {
        var _panelProps$dataSourc;
        if (panelProps !== null && panelProps !== void 0 && (_panelProps$dataSourc = panelProps.dataSource) !== null && _panelProps$dataSourc !== void 0 && (_panelProps$dataSourc = _panelProps$dataSourc.children) !== null && _panelProps$dataSourc !== void 0 && _panelProps$dataSourc.length) {
          return renderChildren === null || renderChildren === void 0 ? void 0 : renderChildren(panelProps);
        }
        return null;
      },
      panelStyle: panelStyle,
      panelContainer: function panelContainer(panelProps) {
        var _panelProps$dataSourc2;
        var childrenMaxLevel = ((_panelProps$dataSourc2 = panelProps.dataSource) === null || _panelProps$dataSourc2 === void 0 ? void 0 : _panelProps$dataSourc2.childrenMaxLevel) || 2;
        var _positionId = positionId || '';
        if (level2PositionId && childrenMaxLevel < 2) {
          _positionId = level2PositionId;
        }
        if (_positionId) {
          return document.querySelector(_positionId);
        }
        return null;
      }
    }));
  };
  return /*#__PURE__*/React.createElement(SuperTabs, {
    id: skuId,
    tabItemStyle: {},
    dataSource: dataSource,
    value: activePanelKey,
    onChange: setActivePanelKey,
    rowKey: "id",
    className: superTabsProps === null || superTabsProps === void 0 ? void 0 : superTabsProps.className,
    style: _objectSpread({
      flex: 1,
      background: levelConfig.superTabsBg
    }, (superTabsProps === null || superTabsProps === void 0 ? void 0 : superTabsProps.style) || {}),
    gridProps: _objectSpread({
      direction: 'horizontal',
      gap: 4,
      wrap: expand ? 'wrap' : 'nowrap'
    }, (superTabsProps === null || superTabsProps === void 0 ? void 0 : superTabsProps.gridProps) || {}),
    scrollViewProps: _objectSpread({
      style: {
        padding: '4px 8px'
      },
      overflow: !expand ? 'x' : 'hidden',
      scrollbarStyle: 'none',
      scrollActionsConfig: {
        type: 'lrArrows',
        show: true
      }
    }, (superTabsProps === null || superTabsProps === void 0 ? void 0 : superTabsProps.scrollViewProps) || {}),
    renderItem: renderItem
  });
});
TabbarLevel.displayName = 'TabbarLevel';
export default TabbarLevel;