"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("maycur-antd/lib/icon/style/css");

var _icon = _interopRequireDefault(require("maycur-antd/lib/icon"));

require("maycur-antd/lib/tooltip/style/css");

var _tooltip = _interopRequireDefault(require("maycur-antd/lib/tooltip"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

require("maycur-antd/lib/menu/style/css");

var _menu = _interopRequireDefault(require("maycur-antd/lib/menu"));

require("maycur-antd/lib/layout/style/css");

var _layout = _interopRequireDefault(require("maycur-antd/lib/layout"));

var _react = _interopRequireDefault(require("react"));

var _lodash = _interopRequireDefault(require("lodash"));

var _classnames = _interopRequireDefault(require("classnames"));

var _utils = _interopRequireDefault(require("../../utils/utils"));

var _style = require("./style.js");

var prefix = _utils.default.prefixCls;
var Header = _layout.default.Header;
var SubMenu = _menu.default.SubMenu;

var MkHeader = function MkHeader(props) {
  var collapsed = props.collapsed,
      pathArr = props.pathArr,
      onToggleCollapsed = props.onToggleCollapsed,
      leftMenus = props.leftMenus,
      _props$rightMenus = props.rightMenus,
      rightMenus = _props$rightMenus === void 0 ? [] : _props$rightMenus,
      logo = props.logo,
      _renderHeaderMenu = props.renderHeaderMenu,
      isShowMenuFn = props.isShowMenuFn,
      onMenuClick = props.onMenuClick,
      Link = props.Link,
      renderMenuLabel = props.renderMenuLabel,
      headerBgColor = props.headerBgColor;
  var menus = leftMenus.concat(rightMenus);

  var matchedMenu = _lodash.default.find(menus, function (menu) {
    var pathReg = new RegExp('^' + menu.path);
    return pathReg.test(pathArr.join('/'));
  });

  var selectedKeys = matchedMenu ? [matchedMenu.path] : [];

  var toggleCollapsed = function toggleCollapsed() {
    if (onToggleCollapsed && typeof onToggleCollapsed === 'function') {
      onToggleCollapsed(!collapsed);
    }
  };

  var logoAreaClassName = (0, _classnames.default)("".concat(prefix, "-header-logo"), (0, _defineProperty2.default)({}, "".concat(prefix, "-header-logo-collapsed"), collapsed));

  var renderMenuContent = function renderMenuContent(menu) {
    var isShowMenu = isShowMenuFn(menu, true);
    if (!isShowMenu) return null;
    var menuLabel = menu.customRender ? renderMenuLabel(menu) : !!menu.icon ? typeof menu.icon === 'string' ? /*#__PURE__*/_react.default.createElement("span", {
      className: "fm ".concat(menu.icon),
      style: {
        fontSize: menu.iconSize || '18px'
      }
    }) : menu.icon : menu.name;
    var content = menu.skip ? /*#__PURE__*/_react.default.createElement("a", {
      href: menu.href
    }, menuLabel) : menu.hoverToShowSubMenu ? /*#__PURE__*/_react.default.createElement("span", null, menuLabel) : menu.customHandleClick ? /*#__PURE__*/_react.default.createElement("span", {
      onClick: function onClick() {
        return onMenuClick(menu);
      }
    }, menuLabel) : /*#__PURE__*/_react.default.createElement(Link, {
      to: menu.path
    }, menuLabel);
    return menu.showTooltip ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
      title: menu.name
    }, content) : content;
  };

  var renderMenu = function renderMenu(menu) {
    var hoverToShowSubMenu = menu.hoverToShowSubMenu,
        subRoutes = menu.subRoutes,
        hoverSubMenu = menu.hoverSubMenu;
    var content = renderMenuContent(menu);
    return content ? hoverToShowSubMenu ? /*#__PURE__*/_react.default.createElement(SubMenu, {
      key: menu.path,
      title: content
    }, (hoverSubMenu || subRoutes).map(function (subRoute) {
      var sub = renderMenuContent(subRoute);
      return !!sub && /*#__PURE__*/_react.default.createElement(_menu.default.Item, {
        key: subRoute.path
      }, sub);
    })) : /*#__PURE__*/_react.default.createElement(_menu.default.Item, {
      key: menu.path
    }, content) : null;
  };

  var renderHeaderMenu = function renderHeaderMenu(partMenus) {
    if (_renderHeaderMenu) return _renderHeaderMenu(partMenus);
    return /*#__PURE__*/_react.default.createElement(_menu.default, {
      theme: "dark",
      mode: "horizontal",
      defaultSelectedKeys: [menus[0].path],
      selectedKeys: selectedKeys
    }, partMenus.map(function (menu) {
      return renderMenu(menu);
    }));
  };

  return /*#__PURE__*/_react.default.createElement(Header, {
    className: "".concat(prefix, "-header"),
    style: (0, _style.headerBg)(headerBgColor)
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: logoAreaClassName
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "logo-content"
  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("img", {
    src: logo,
    alt: "\u6BCF\u523B\u62A5"
  }))), /*#__PURE__*/_react.default.createElement(_icon.default, {
    onClick: toggleCollapsed,
    className: "trigger",
    type: collapsed ? 'menu-unfold' : 'menu-fold'
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "-header-menus")
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "left-menu"
  }, renderHeaderMenu(leftMenus)), rightMenus.length ? /*#__PURE__*/_react.default.createElement("div", {
    className: "right-menu"
  }, renderHeaderMenu(rightMenus)) : null));
};

var _default = MkHeader;
exports.default = _default;