import React from 'react'
import PropTypes from 'prop-types'
import Button from '../Button'
import AppBarMenu from './index'
import styles from './styles.css'

class MenuList extends React.Component {
  constructor () {
    super()
    this.state = {
      expanded: false
    }
  }
  componentWillReceiveProps (nextProps) {
    if (nextProps.isReset && nextProps.active !== this.state.expanded) {
      this.setState({
        expanded: nextProps.active
      })
    }
  }
  toggleExpanded () {
    this.setState({
      expanded: !this.state.expanded
    })
  }
  render () {
    let { menus } = this.props
    return (
      <div className={styles.menuListContainer}>
        <div className={this.props.active ? styles.active : ''}>
          <Button label={this.props.label} full onClick={this.toggleExpanded.bind(this)} style={{ color: '#FFF' }} />
        </div>
        <div className={styles.arrowContainer}>
          <div className={this.state.expanded ? styles.arrowUp : styles.arrowDown}></div>
        </div>
        <div className={styles.menuChildrenContainer} style={{ display: this.state.expanded ? 'block' : 'none' }}>
          <AppBarMenu menus={menus} isReset={this.props.isReset} />
        </div>
      </div>
    )
  }
}

MenuList.propTypes = {
  label: PropTypes.string,
  active: PropTypes.bool,
  menus: PropTypes.array,
  isReset: PropTypes.bool
}

export default MenuList