import React, { Component } from 'react';
import { Link } from 'react-router';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import AppBar from 'material-ui/AppBar';


export class Root extends Component{
  static propTypes = {
    children: React.PropTypes.any
  };

  static childContextTypes = {
    muiTheme: React.PropTypes.object.isRequired,
  };

  constructor(props){
    super(props);
    this.state = {
      open: false
    };
  }

  getStyles(){
    const styles = {
      appBar: {
        display: 'flex'
      }
    };
    return styles;
  }

  getChildContext(){
    return {muiTheme: getMuiTheme()};
  }

  leftButtonTouched = () => this.setState({open: !this.state.open});

  rightButtonTouched = () => {

  }

  menuItemTouched = (e) => {
    this.setState({open: !this.state.open});
  }

  render(){
    const styles = this.getStyles();
    return (
      <div>
        <AppBar
          onLeftIconButtonTouchTap={this.leftButtonTouched}
          onRightIconButtonTouchTap={this.rightButtonTouched}
          // ここで指定できているはず。
          iconClassNameRight="muidocs-icon-action-home"
          style={styles.appBar}/>
        <Drawer
          open={this.state.open}
          docked={false}
          width={200}
          onRequestChange={open => this.setState({open})}>
        </Drawer>
        {this.props.children}
      </div>
    );
  }
}