import { use, noop } from '../utils';
import Icon from '../icon';

const [sfc, bem] = use('nav-bar');

export default sfc({
  functional: true,

  props: {
    title: String,
    fixed: Boolean,
    leftText: String,
    rightText: String,
    leftArrow: Boolean,
    border: {
      type: Boolean,
      default: true
    },
    zIndex: {
      type: Number,
      default: 1
    }
  },

  render(h, context, inherit) {
    const { props, listeners } = context;
    const slots = context.slots();

    return (
      <div
        class={[bem({ fixed: props.fixed }), { 'van-hairline--bottom': props.border }]}
        style={{ zIndex: props.zIndex }}
        {...inherit}
      >
        <div class={bem('left')} onClick={listeners['click-left'] || noop}>
          {slots.left || [
            props.leftArrow && <Icon class={bem('arrow')} name="arrow-left" />,
            props.leftText && <span class={bem('text')}>{props.leftText}</span>
          ]}
        </div>
        <div class={[bem('title'), 'van-ellipsis']}>{slots.title || props.title}</div>
        <div class={bem('right')} onClick={listeners['click-right'] || noop}>
          {slots.right || (props.rightText && <span class={bem('text')}>{props.rightText}</span>)}
        </div>
      </div>
    );
  }
});