var React = require('react');
var Router = require('react-router');
var RouteHandler = Router.RouteHandler;

var DigH5 = require("../../../libs/dig-h5/DigH5.jsx");
var AppBar = DigH5.AppBar;
var IconButton = DigH5.IconButton;
var DropDownButton = DigH5.DropDownButton;
var List = DigH5.List;
var AppLeftNav = require('../components/app-left-nav.jsx');
var WebContext = DigH5.Utils.WebContext;

var Index = React.createClass({

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

  render: function() {

    var title = '数据分析平台';

    var listItems = [
      { 
        primaryText : 'Ge Bi Wang',
        secondaryText : " I'll be in your neighborhood doing",
        leftImageSrc: './images/2.jpg'
      },
      { 
        primaryText : 'Xiao Hua Li',
        secondaryText : " I'll be in your neighborhood doing",
        leftImageSrc: './images/3.jpg'
      },
      { 
        primaryText : 'Min Li Chan',
        secondaryText : " I'll be in your neighborhood doing",
        leftImageSrc: './images/4.jpg'
      },
      { 
        primaryText : 'Xiao Hua Li',
        secondaryText : " I'll be in your neighborhood doing",
        leftImageSrc: './images/3.jpg'
      },
      { 
        primaryText : 'Min Li Chan',
        secondaryText : " I'll be in your neighborhood doing",
        leftImageSrc: './images/4.jpg'
      }

    ];

    var rightButton = (
      <div>
        <IconButton
          iconClassName="bingo-dig-icons-88"
          href="" />
        <DropDownButton 
          iconClassName="bingo-dig-icons-734" 
          dropDownContainerWidth={300}
          hasCounts={true}
          counts={5}>
            <div className="lv-header"> Notification </div>
            <List
              type='TwoLine'
              leftElementType='Image'
              listItems={listItems}
              canClick={true}/>
            <a className="lv-footer" href="">View Previous</a>
        </DropDownButton>
        <IconButton
          iconClassName="bingo-dig-icons-6"
          href="" />
      </div>
    );

    return (
      <div>
        <AppBar
          className="dig-dark-theme"
          onMenuIconButtonTouchTap={this._onMenuIconButtonTouchTap}
          title={title}
          zDepth={0} iconElementRight={rightButton}>
        </AppBar>

        <AppLeftNav ref="leftNav" />
        <div className="dig-app-content-canvas">
          <RouteHandler />
        </div>
      </div>
    );
  },

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

});

module.exports = Index;