import "core-js/modules/es.array.iterator.js";
import "core-js/modules/web.dom-collections.iterator.js";
import React, { useRef, useState } from 'react';
import classNames from 'classnames';
import ResizeObserver from 'rc-resize-observer';
import { defaultRenderLogoAndTitle } from '../SiderMenu/SiderMenu';
import BaseMenu from '../SiderMenu/BaseMenu';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
/**
 * 抽离出来是为了防止 rightSize 经常改变导致菜单 render
 *
 * @param param0
 */
const RightContent = ({
  rightContentRender,
  ...props
}) => {
  const [rightSize, setRightSize] = useState('auto');
  return /*#__PURE__*/_jsx("div", {
    style: {
      minWidth: rightSize
    },
    children: /*#__PURE__*/_jsx("div", {
      style: {
        paddingRight: 8
      },
      children: /*#__PURE__*/_jsx(ResizeObserver, {
        onResize: ({
          width
        }) => {
          setRightSize(width);
        },
        children: rightContentRender && /*#__PURE__*/_jsx("div", {
          children: rightContentRender({
            ...props
          })
        })
      })
    })
  });
};
const TopNavHeader = props => {
  const ref = useRef(null);
  const {
    theme,
    onMenuHeaderClick,
    contentWidth,
    rightContentRender,
    className: propsClassName,
    style,
    layout
  } = props;
  const prefixCls = `${props.prefixCls || 'ant-pro'}-top-nav-header`;
  const headerDom = defaultRenderLogoAndTitle({
    ...props,
    collapsed: false
  }, layout === 'mix' ? 'headerTitleRender' : undefined);
  const className = classNames(prefixCls, propsClassName, {
    light: theme === 'light'
  });
  return /*#__PURE__*/_jsx("div", {
    className: className,
    style: style,
    children: /*#__PURE__*/_jsxs("div", {
      ref: ref,
      className: `${prefixCls}-main ${contentWidth === 'Fixed' ? 'wide' : ''}`,
      children: [headerDom && /*#__PURE__*/_jsx("div", {
        className: `${prefixCls}-main-left`,
        onClick: onMenuHeaderClick,
        children: /*#__PURE__*/_jsx("div", {
          className: `${prefixCls}-logo`,
          id: "logo",
          children: headerDom
        }, "logo")
      }), /*#__PURE__*/_jsx("div", {
        style: {
          flex: 1
        },
        className: `${prefixCls}-menu`,
        children: /*#__PURE__*/_jsx(BaseMenu, {
          ...props,
          ...props.menuProps
        })
      }), rightContentRender && /*#__PURE__*/_jsx(RightContent, {
        rightContentRender: rightContentRender,
        ...props
      })]
    })
  });
};
export default TopNavHeader;