function _extends() { _extends = Object.assign || 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); }

import React, { isValidElement, useContext, useRef } from 'react';
import clsx from 'clsx';
import { ArrowLeft } from '@react-vant/icons';
import { BORDER_BOTTOM } from '../utils/constant';
import useHeight from '../hooks/use-height';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';

var NavBar = function NavBar(props) {
  var _useContext = useContext(ConfigProviderContext),
      prefixCls = _useContext.prefixCls,
      createNamespace = _useContext.createNamespace;

  var _createNamespace = createNamespace('nav-bar', prefixCls),
      bem = _createNamespace[0];

  var navBarRef = useRef(null);
  var navBarHeight = useHeight(navBarRef);

  var onClickLeft = function onClickLeft(event) {
    if (props.onClickLeft) props.onClickLeft(event);
  };

  var onClickRight = function onClickRight(event) {
    if (props.onClickRight) props.onClickRight(event);
  };

  var renderLeft = function renderLeft() {
    if (typeof props.leftText !== 'string' && /*#__PURE__*/isValidElement(props.leftText)) {
      return props.leftText;
    }

    return [props.leftArrow && /*#__PURE__*/React.cloneElement(props.leftArrow, {
      key: 'arroe',
      className: clsx(bem('arrow'))
    }), props.leftText && /*#__PURE__*/React.createElement("span", {
      key: "text",
      className: clsx(bem('text'))
    }, props.leftText)];
  };

  var renderRight = function renderRight() {
    if (typeof props.rightText !== 'string' && /*#__PURE__*/isValidElement(props.rightText)) {
      return props.rightText;
    }

    return /*#__PURE__*/React.createElement("span", {
      className: clsx(bem('text'))
    }, props.rightText);
  };

  var renderNavBar = function renderNavBar() {
    var _clsx;

    var title = props.title,
        fixed = props.fixed,
        border = props.border,
        zIndex = props.zIndex;

    var style = _extends({
      zIndex: zIndex !== undefined ? +zIndex : undefined
    }, props.style);

    var hasLeft = props.leftArrow || props.leftText;
    var hasRight = props.rightText;
    return /*#__PURE__*/React.createElement("div", {
      ref: navBarRef,
      style: style,
      className: clsx(bem({
        fixed: fixed,
        'safe-area-inset-top': props.safeAreaInsetTop
      }), (_clsx = {}, _clsx[BORDER_BOTTOM] = border, _clsx), props.className)
    }, /*#__PURE__*/React.createElement("div", {
      className: clsx(bem('content'))
    }, hasLeft && /*#__PURE__*/React.createElement("div", {
      className: clsx(bem('left')),
      onClick: onClickLeft
    }, renderLeft()), /*#__PURE__*/React.createElement("div", {
      className: clsx(bem('title'), 'rv-ellipsis')
    }, title), hasRight && /*#__PURE__*/React.createElement("div", {
      className: clsx(bem('right')),
      onClick: onClickRight
    }, renderRight())));
  };

  var renderPlaceholder = function renderPlaceholder() {
    if (props.fixed && props.placeholder) {
      return /*#__PURE__*/React.createElement("div", {
        className: clsx(bem('placeholder')),
        style: {
          height: navBarHeight ? navBarHeight + "px" : undefined
        }
      });
    }

    return null;
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, renderPlaceholder(), renderNavBar());
};

NavBar.defaultProps = {
  border: true,
  leftArrow: /*#__PURE__*/React.createElement(ArrowLeft, null)
};
export default NavBar;