import React from 'react'
import PropTypes from 'prop-types'
import AppBar from 'material-ui/AppBar'
import Toolbar from 'material-ui/Toolbar'
import Typography from 'material-ui/Typography'
import MenuButton from '../MenuButton'
import IconButton from 'material-ui/IconButton'
import MenuIcon from 'material-ui-icons/Menu'

class BaseAppBar extends React.Component {
  constructor () {
    super()
    this.theme = null
  }

  render () {
    let appBar = this.props
    let drawerToggleElement
    if (appBar.haveDrawer) {
      drawerToggleElement = (
        <IconButton color='contrast' aria-label='Menu' onClick={appBar.onDrawerIconClick.bind(this)}>
          <MenuIcon />
        </IconButton>
      )
    }
    let titleElement
    if (appBar.title) {
      let titleStyle = { flex: 1 }
      if (appBar.title.props && appBar.title.props.style) {
        titleStyle = {
          ...titleStyle,
          ...appBar.title.props.style
        }
      }
      titleElement = (
        <Typography type='title' color='inherit' {...appBar.title.props} style={titleStyle}>
          {appBar.title.name}
        </Typography>
      )
    }
    let toolbarProps = {}
    let toolbarMenus = []
    if (appBar.toolbar) {
      toolbarProps = appBar.toolbar.props ? appBar.toolbar.props : toolbarProps
      if (appBar.toolbar.menus) {
        appBar.toolbar.menus.forEach((m, i) => {
          let menuElement = (
            <MenuButton
              key={i}
              {...m} />
          )
          toolbarMenus.push(menuElement)
        })
      }
    }
    return (
      <AppBar {...appBar.props}>
        <Toolbar {...toolbarProps}>
          {drawerToggleElement}
          {titleElement}
          {toolbarMenus}
        </Toolbar>
      </AppBar>
    )
  }
}

BaseAppBar.propTypes = {
  active: PropTypes.bool,
  title: PropTypes.object,
  toolbar: PropTypes.object,
  props: PropTypes.object
}

export default BaseAppBar