import React from 'react'
import PropTypes from 'prop-types'
import Button from '../Button'
import IconButton from 'material-ui/IconButton'
import Menu, { MenuItem } from 'material-ui/Menu'
import Popover from 'material-ui/Popover'

class MenuButton extends React.Component {
  constructor () {
    super()
    this.theme = null
    this.state = {
      anchorEl: null,
      open: false
    }
  }

  handleClick (event) {
    this.setState({
      open: true,
      anchorEl: event.currentTarget
    })
  }

  handleRequestClose () {
    this.setState({
      open: false
    })
  }

  handleMenuItemClick (menu) {
    this.handleRequestClose()
    if (menu.props.onClick) {
      menu.props.onClick(menu)
    }
  }

  randomId () {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1)
  }

  render () {
    let m = this.props
    let button
    let menuElement
    let buttonProps = {}
    let toolbarMenuId = 'toolbar-menu-' + this.randomId()
    if (m.child) {
      buttonProps.color = 'contrast'
      buttonProps.onClick = this.handleClick.bind(this)
    }
    buttonProps = {
      ...buttonProps,
      ...m.props
    }
    if (m.type === 'button') {
      button = (
        <Button color='contrast' {...buttonProps}>{m.text}</Button>
      )
    } else if (m.type === 'iconButton') {
      delete buttonProps.uppercase
      button = (
        <IconButton color='contrast' {...buttonProps}>{m.text}</IconButton>
      )
    }
    menuElement = button
    if (m.child) {
      let child
      if (m.child.type === 'dropdown') {
        // let menuProps = {}
        // if (m.child.anchorOrigin) {
        //   menuProps.anchorOrigin = m.child.anchorOrigin
        // }
        // if (m.child.transformOrigin) {
        //   menuProps.transformOrigin = m.child.transformOrigin
        // }
        child = (
          <Menu
            id={toolbarMenuId}
            anchorEl={this.state.anchorEl}
            open={this.state.open}
            onRequestClose={this.handleRequestClose.bind(this)}
            PaperProps={m.child.PaperProps}
            // {...menuProps}
            >
            {
              m.child.menus.map((m2, j) => {
                let menuItemProps = {...m2.props}
                delete menuItemProps.onClick
                return (
                  <MenuItem key={j} onClick={this.handleMenuItemClick.bind(this, m2)} {...menuItemProps}>{m2.text}</MenuItem>
                )
              })
            }
          </Menu>
        )
      } else if (m.child.type === 'popover') {
        let anchorOrigin = {
          vertical: 'bottom',
          horizontal: 'center',
          ...m.child.anchorOrigin
        }
        let transformOrigin = {
          vertical: 'top',
          horizontal: 'center',
          ...m.child.transformOrigin
        }
        child = (
          <Popover
            open={this.state.open}
            anchorEl={this.state.anchorEl}
            onRequestClose={this.handleRequestClose.bind(this)}
            anchorOrigin={anchorOrigin}
            transformOrigin={transformOrigin}>
            {m.child.content}
          </Popover>
        )
      }
      menuElement = (
        <div>
          {button}
          {child}
        </div>
      )
    }

    return menuElement
  }
}

MenuButton.propTypes = {
  text: PropTypes.any,
  type: PropTypes.string,
  child: PropTypes.object,
  props: PropTypes.object
}

export default MenuButton