import React, { PropTypes, Children } from 'react'
import BarButtonItem from '../BarButtonItem'
import styles from './index.css'

const propTypes = {
  className: PropTypes.string,
  children: PropTypes.node,
  title: PropTypes.string,
}

const defaultProps = {
  className: '',
}

const NavBar = ({ className, children, title, ...other }) => {
  const leftNavBarItems = []
  const rightNavBarItems = []
  Children.forEach(children, child => {
    const position = child.props.position
    switch (position) {
      case 'left':
        leftNavBarItems.push(child)
        break
      case 'right':
        rightNavBarItems.push(child)
        break
      default:
        leftNavBarItems.push(child)
    }
  })
  return (
    <div>
      <nav {...other} className={`${styles.navBar} ${className}`}>
        <span className={`${styles.leftNavBarItems}`}>{leftNavBarItems}</span>
        <span className={`${styles.title}`}>{title}</span>
        <span className={`${styles.rightNavBarItems}`}>{rightNavBarItems}</span>
      </nav>
      <div className={styles.fixedHelper}></div>
    </div>

  )
}

NavBar.propTypes = propTypes
NavBar.defaultProps = defaultProps
NavBar.Item = BarButtonItem

export default NavBar