import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
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';

const NavBar = props => {
  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace('nav-bar', prefixCls);
  const navBarRef = useRef(null);
  const navBarHeight = useHeight(navBarRef);

  const onClickLeft = event => {
    if (props.onClickLeft) props.onClickLeft(event);
  };

  const onClickRight = event => {
    if (props.onClickRight) props.onClickRight(event);
  };

  const renderLeft = () => {
    if (typeof props.leftText !== 'string' && isValidElement(props.leftText)) {
      return props.leftText;
    }

    return [props.leftArrow && React.cloneElement(props.leftArrow, {
      key: 'arroe',
      className: clsx(bem('arrow'))
    }), props.leftText && _jsx("span", Object.assign({
      className: clsx(bem('text'))
    }, {
      children: props.leftText
    }), "text")];
  };

  const renderRight = () => {
    if (typeof props.rightText !== 'string' && isValidElement(props.rightText)) {
      return props.rightText;
    }

    return _jsx("span", Object.assign({
      className: clsx(bem('text'))
    }, {
      children: props.rightText
    }));
  };

  const renderNavBar = () => {
    const {
      title,
      fixed,
      border,
      zIndex
    } = props;
    const style = Object.assign({
      zIndex: zIndex !== undefined ? +zIndex : undefined
    }, props.style);
    const hasLeft = props.leftArrow || props.leftText;
    const hasRight = props.rightText;
    return _jsx("div", Object.assign({
      ref: navBarRef,
      style: style,
      className: clsx(bem({
        fixed,
        'safe-area-inset-top': props.safeAreaInsetTop
      }), {
        [BORDER_BOTTOM]: border
      }, props.className)
    }, {
      children: _jsxs("div", Object.assign({
        className: clsx(bem('content'))
      }, {
        children: [hasLeft && _jsx("div", Object.assign({
          className: clsx(bem('left')),
          onClick: onClickLeft
        }, {
          children: renderLeft()
        })), _jsx("div", Object.assign({
          className: clsx(bem('title'), 'rv-ellipsis')
        }, {
          children: title
        })), hasRight && _jsx("div", Object.assign({
          className: clsx(bem('right')),
          onClick: onClickRight
        }, {
          children: renderRight()
        }))]
      }))
    }));
  };

  const renderPlaceholder = () => {
    if (props.fixed && props.placeholder) {
      return _jsx("div", {
        className: clsx(bem('placeholder')),
        style: {
          height: navBarHeight ? `${navBarHeight}px` : undefined
        }
      });
    }

    return null;
  };

  return _jsxs(_Fragment, {
    children: [renderPlaceholder(), renderNavBar()]
  });
};

NavBar.defaultProps = {
  border: true,
  leftArrow: _jsx(ArrowLeft, {})
};
export default NavBar;