import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from 'react';
import Truncate from '@alicloud/console-components-truncate';
import * as PropTypes from 'prop-types';
import * as S from './styles';
import BackArrow from './BackArrow';
/**
 * @public
 */

/**
 * @public
 */
var Header = function Header(_ref) {
  var breadcrumb = _ref.breadcrumb,
      className = _ref.className,
      style = _ref.style,
      childrenAlign = _ref.childrenAlign,
      children = _ref.children,
      title = _ref.title,
      subTitle = _ref.subTitle,
      hasBackArrow = _ref.hasBackArrow,
      renderBackArrow = _ref.renderBackArrow,
      onBackArrowClick = _ref.onBackArrowClick,
      breadcrumbExtra = _ref.breadcrumbExtra,
      breadcrumbExtraAlign = _ref.breadcrumbExtraAlign;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      isTitleOverflow = _useState2[0],
      setIsTitleOverflow = _useState2[1];

  return React.createElement(React.Fragment, null, (breadcrumb || breadcrumbExtra) && React.createElement(S.HeaderTopbar, {
    alignLeft: breadcrumbExtraAlign === 'left'
  }, React.createElement(S.HeaderTopbarMain, null, breadcrumb), React.createElement(S.HeaderTopbarExtra, null, breadcrumbExtra)), (hasBackArrow || title || subTitle || children) && React.createElement(S.Header, {
    className: className,
    style: style,
    alignLeft: childrenAlign === 'left'
  }, React.createElement(S.HeaderMain, {
    shouldGrow: isTitleOverflow
  }, hasBackArrow && React.createElement(BackArrow, {
    render: renderBackArrow,
    onClick: onBackArrowClick
  }), title && React.createElement(S.HeaderTitle, null, React.createElement(Truncate // 充满弹性容器
  , {
    style: {
      width: '100%'
    },
    type: "width",
    threshold: "auto",
    align: "b",
    tooltipMaxWidth: 500,
    isOverflowChange: function isOverflowChange(newIsOverflow) {
      setIsTitleOverflow(newIsOverflow);
    }
  }, title)), subTitle && React.createElement(S.HeaderSubTitle, null, subTitle)), children && React.createElement(S.HeaderExtra, null, children)));
};

Header.propTypes = {
  className: PropTypes.string,
  style: PropTypes.objectOf(PropTypes.any),
  children: PropTypes.node,
  hasBackArrow: PropTypes.bool,
  renderBackArrow: PropTypes.func,
  onBackArrowClick: PropTypes.func,
  title: PropTypes.node,
  subTitle: PropTypes.node,
  breadcrumb: PropTypes.node,
  childrenAlign: PropTypes.oneOf(['left', 'right'])
};
export default Header;