var React = require('react')

//
//  * [首页示例](README.md)
//  * [引导教程](sections/tutorial/index.md)
//  * 5 分钟的 todo demo
//* [与 react-router 结合](sections/tutorial/with-react-router.md)
//  * [详细使用文档](sections/docs/index.md)
//* [Roof 容器](sections/docs/react/container.md)
//* [数据的定义与使用](sections/docs/data/index.md)
//* [单个数据-Node](sections/docs/data/node.md)
//* [数据集合-Nodes](sections/docs/data/nodes.md)
//* [数据相关插件](sections/docs/addon-reactive.md)
//* [事件的定义与使用](sections/docs/event/index.md)
//* [流程控制](sections/docs/event/flow-control.md)
//* [数据传递](sections/docs/event/data-passing.md)
//* [高阶教程](sections/advanced/index.md)
//* [与 chair 结合进行服务器端渲染]()

module.exports = React.createClass({
  getInitialState(){
    return {
      summary : {
        chapters : [{
          title : '引导教程',
          path : '/pages/tutorial/index.html',
          articles : [{
            title : '5 分钟的 todo demo',
          },{
            title : '与 react-router 结合',
            path : '/pages/tutorial/with-react-router.html',
          }]
        },{
          title : '详细使用文档',
          path : '/pages/docs/index.html',
          articles : [{
            title : 'Roof 容器',
            path : '/pages/docs/react/container.html'
          },{
            title:'单个数据-Node',
            path:'/pages/docs/data/node.html'
          },{
            title:'数据集合-Nodes',
            path:'/pages/docs/data/nodes.html'
          },{
            title : '数据相关插件',
          },{
            title : '事件的定义与使用',
            path : '/pages/docs/event/index.html',
            articles : [{
              title : '流程控制',
              path : '/pages/docs/event/flow-control.html',
            },{
              title : '数据传递',
              path : '/pages/docs/event/data-passing.html',
            }]
          },{
            title : '高级教程',
            articles : [{
              title : '服务器端渲染'
            }]
          }]
        }]
      }
    }
  },
  createChapterNode(chapter){
    var articlesNode = null
    if (chapter.articles && chapter.articles.length > 0) {
      articlesNode = chapter.articles.map(this.createChapterNode)
    }

    var link = chapter.path ?
    <a href={chapter.path}>
      <i className="fa fa-check"></i>
      {chapter.title }
    </a> :
    <a disabled={true}>
      <i className="fa fa-check"></i>
      {chapter.title }[编写中]
    </a>



    return <li className="chapter" data-level={ chapter.level }>
      {link}
      <ul className="articles">
        {articlesNode}
      </ul>
    </li>
  },
  render(){

    var chapters = this.state.summary.chapters.map(this.createChapterNode)

    return <div className="book-summary">
      <nav role="navigation">
        <ul className="summary">
          {chapters}
        </ul>
      </nav>

    </div>
  }
})