using themes

var Spacing = MUI.Styles.Spacing;
var Colors = MUI.Styles.Colors;
var ColorManipulator = MUI.Utils.ColorManipulator;

AppTheme = {
  appBar: {
    color: '#15e71d',
    textColor: 'white'
  },

  zIndex: {
    leftNav: 1000
  },
  spacing: Spacing,
  fontFamily: 'sans-serif',
  palette: {
    primary1Color: '#45058e',
    primary2Color: '#E22A23',
    primary3Color: Colors.lightBlack,
    accent1Color: Colors.blue500,
    accent2Color: Colors.grey100,
    accent3Color: Colors.grey500,
    textColor: Colors.darkBlack,
    alternateTextColor: Colors.white,
    canvasColor: Colors.white,
    borderColor: Colors.grey300,
    disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3)
  }
};




/* global AppLeftNav:true,NavButton:true */

const { AppBar, IconButton, IconMenu, LeftNav } = MUI;
const { MenuItem } = MUI;
const { NavigationMoreVert } = MUI.Libs.SvgIcons;

var { Styles, Colors } = MUI;
var { ThemeManager } = Styles;

MainLayout = React.createClass({

  propTypes: {
    content: React.PropTypes.object
  },

  childContextTypes: {
    muiTheme: React.PropTypes.object,
    snackbar: React.PropTypes.object,
    layoutName: React.PropTypes.string
  },

  getChildContext() {
    return {
      muiTheme: ThemeManager.getMuiTheme(AppTheme),
      snackbar: this.refs.snackbar,
      layoutName: 'main layout'
    };
  },

  showLeftMenu() {
    Logger.log('show left', this.refs.leftNav);
    this.refs.leftNav.handleToggle();
  },

  componentDidMount() {
  },

  render() {

    let title = AppConfig.pageName + ' @' + AppConfig.ChatRobotEnv;

    return (
      <div className='app'>

        <AppLeftNav
          ref='leftNav'
        />

        <AppBar
          title={title}
          onTouchTap={this.showLeftMenu}
        />
        <div>
          {this.props.content}
        </div>
      </div>
    );
  },


});