var React = require('react');
var Router = require('react-router');
var DigH5 = require("../../../libs/dig-h5/DigH5.jsx");
var LeftNav = DigH5.LeftNav;

var menuItems = [
    { route: 'login', text: '登陆' },
    { route: 'home', text: '首页' },
    { route: 'data', text: '应用' }
];

var AppLeftNav = React.createClass({

  contextTypes: {
      router: React.PropTypes.func
  },

  getInitialState: function() {
    return {
      selectedIndex: null
    };
  },

  render: function() {
    var header = <div className="logo" onClick={this._onHeaderClick}>H5 Demo</div>;

    return (
      <LeftNav
        ref="leftNav"
        docked={false}
        isInitiallyOpen={false}
        header={header}
        menuItems={menuItems}
        selectedIndex={this._getSelectedIndex()}
        onChange={this._onLeftNavChange} />
    );
  },

  toggle: function() {
    this.refs.leftNav.toggle();
  },

  _getSelectedIndex: function() {
    var currentItem;

    for (var i = menuItems.length - 1; i >= 0; i--) {
      currentItem = menuItems[i];
      if (currentItem.route && this.context.router.isActive(currentItem.route)) return i;
    };
  },

  _onLeftNavChange: function(e, key, payload) {
    this.context.router.transitionTo(payload.route);
  },

  _onHeaderClick: function() {
    this.context.router.transitionTo('root');
    this.refs.leftNav.close();
  }

});

module.exports = AppLeftNav;