import React, { useContext, useRef } from "react";
import classnames from "classnames";
import Icon from "../icon";
import { getZIndexStyle } from "../utils";
import { BORDER_BOTTOM, HAPTICS_FEEDBACK } 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();
  const height = useHeight(navBarRef);
  const onClickLeft = (event) => {
    var _a;
    return (_a = props.onClickLeft) == null ? void 0 : _a.call(props, event);
  };
  const onClickRight = (event) => {
    var _a;
    return (_a = props.onClickRight) == null ? void 0 : _a.call(props, event);
  };
  const renderLeft = () => {
    return [props.leftArrow && /* @__PURE__ */ React.createElement(Icon, {
      key: "icon",
      className: classnames(bem("arrow")),
      name: "arrow-left"
    }), props.leftArea && /* @__PURE__ */ React.createElement("span", {
      key: "left-area",
      className: classnames(bem("text"))
    }, props.leftArea)];
  };
  const renderRight = () => {
    return /* @__PURE__ */ React.createElement("span", {
      className: classnames(bem("text"))
    }, props.rightArea);
  };
  const renderNavBar = () => {
    const {
      title,
      fixed,
      border,
      zIndex
    } = props;
    const style = getZIndexStyle(zIndex);
    const hasLeft = props.leftArrow || props.leftArea;
    const hasRight = props.rightArea;
    return /* @__PURE__ */ React.createElement("div", {
      ref: navBarRef,
      style,
      className: classnames(bem({
        fixed,
        "safe-area-inset-top": props.safeAreaInsetTop
      }), {
        [BORDER_BOTTOM]: border
      })
    }, /* @__PURE__ */ React.createElement("div", {
      className: classnames(bem("content"))
    }, hasLeft && /* @__PURE__ */ React.createElement("div", {
      className: classnames(bem("left"), HAPTICS_FEEDBACK),
      onClick: onClickLeft
    }, renderLeft()), /* @__PURE__ */ React.createElement("div", {
      className: classnames(bem("title"), "van-ellipsis")
    }, title), hasRight && /* @__PURE__ */ React.createElement("div", {
      className: classnames(bem("right"), HAPTICS_FEEDBACK),
      onClick: onClickRight
    }, renderRight())));
  };
  const renderPlaceholder = () => /* @__PURE__ */ React.createElement("div", {
    className: classnames(bem("placeholder")),
    style: {
      height: height ? `${height}px` : void 0
    }
  }, renderNavBar());
  if (props.fixed && props.placeholder) {
    return renderPlaceholder();
  }
  return renderNavBar();
};
NavBar.defaultProps = {
  title: "",
  leftArea: "",
  rightArea: "",
  leftArrow: false,
  border: true,
  fixed: false,
  placeholder: false,
  zIndex: 1,
  safeAreaInsetTop: false
};
var stdin_default = NavBar;
export {
  stdin_default as default
};
