/** @flow */

require('./styles.css');
var React = require('react');
var {Link} = require('react-router');

var ignoreSplatRoutes = a => !/\*$/.test(a.path);
var ignoreDefaultRoutes = (a, b) => a !== b.defaultRoute;

var Toc = React.createClass({
  getDefaultProps(): Object {
    return {
      width: 200,
    };
  },

  render(): ?ReactElement {
    var routes = this.props.routes.childRoutes;

    return (
      <nav className="Toc" role="navigation" style={{width: this.props.width +'px'}}>
        <header className="Toc-header">Table of Contents</header>
        <ul role="tablist" className="Toc-list">
          {routes.map(i => (
            ignoreSplatRoutes(i) &&
            <li className="Toc-item" key={i.path || i.defaultRoute.name}>
              <Link
                className="Toc-link"
                to={i.path || i.defaultRoute.name}
                activeClassName="is-active"
                >{i.name || i.defaultRoute.name || i.path}</Link>
              {i.childRoutes && i.childRoutes.map(c => (
                ignoreSplatRoutes(c) && ignoreDefaultRoutes(c, i) &&
                <Link
                  className="Toc-link Toc-link--child"
                  key={c.name || c.path}
                  to={c.path}
                  activeClassName="is-active"
                  >{c.name || c.path}</Link>
              ))}
            </li>
          ))}
        </ul>
      </nav>
    );
  }
});

module.exports = Toc;