import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import "core-js/modules/es.array.iterator.js";
import "core-js/modules/web.dom-collections.iterator.js";
import React, { Component } from 'react';
import classNames from 'classnames';
import Layout from '../layout';
import GlobalHeader from './components/GlobalHeader';
import TopNavHeader from './components/TopNavHeader';
import { clearMenuItem } from './utils/utils';
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const {
  Header
} = Layout;
class HeaderView extends Component {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "renderContent", () => {
      const {
        isMobile,
        onCollapse,
        navTheme,
        layout,
        headerRender,
        headerContentRender
      } = this.props;
      const isTop = layout === 'top';
      const clearMenuData = clearMenuItem(this.props.menuData || []);
      let defaultDom = /*#__PURE__*/_jsx(GlobalHeader, {
        onCollapse: onCollapse,
        ...this.props,
        menuData: clearMenuData,
        children: headerContentRender && headerContentRender(this.props)
      });
      if (isTop && !isMobile) {
        defaultDom = /*#__PURE__*/_jsx(TopNavHeader, {
          theme: navTheme,
          mode: "horizontal",
          onCollapse: onCollapse,
          ...this.props,
          menuData: clearMenuData
        });
      }
      if (headerRender && typeof headerRender === 'function') {
        return headerRender(this.props, defaultDom);
      }
      return defaultDom;
    });
  }
  render() {
    const {
      fixedHeader,
      layout,
      className: propsClassName,
      style,
      navTheme,
      collapsed,
      siderWidth,
      hasSiderMenu,
      isMobile,
      prefixCls,
      headerHeight
    } = this.props;
    const needFixedHeader = fixedHeader || layout === 'mix';
    const isTop = layout === 'top';
    const needSettingWidth = needFixedHeader && hasSiderMenu && !isTop && !isMobile;
    const className = classNames(propsClassName, {
      [`${prefixCls}-fixed-header`]: needFixedHeader,
      [`${prefixCls}-fixed-header-action`]: !collapsed,
      [`${prefixCls}-top-menu`]: isTop,
      [`${prefixCls}-header-${navTheme}`]: navTheme && layout !== 'mix'
    });

    /** 计算侧边栏的宽度，不然导致左边的样式会出问题 */
    const width = layout !== 'mix' && needSettingWidth ? `calc(100% - ${collapsed ? 48 : siderWidth}px)` : '100%';
    const right = needFixedHeader ? 0 : undefined;
    return /*#__PURE__*/_jsxs(_Fragment, {
      children: [needFixedHeader && /*#__PURE__*/_jsx(Header, {
        style: {
          height: headerHeight,
          lineHeight: `${headerHeight}px`,
          background: 'transparent'
        }
      }), /*#__PURE__*/_jsx(Header, {
        style: {
          padding: 0,
          height: headerHeight,
          lineHeight: `${headerHeight}px`,
          width,
          zIndex: layout === 'mix' ? 100 : 19,
          right,
          ...style
        },
        className: className,
        children: this.renderContent()
      })]
    });
  }
}
export default HeaderView;