var insertCss = require('insert-css')
var r = require('r-dom')
var React = require('react')
var fs = require('fs')
var debug = require('debug')('sidebar:index')
var IconFactory = require('react-icon-factory')

var simpleSidebarCSS = fs.readFileSync(__dirname + '/sidebar.css')
insertCss(simpleSidebarCSS)

var Icon = IconFactory({
  'long-arrow-left': r.g([
    r.path(
      { d: "M20 8h-12.17l5.59-5.59-1.42-1.41-8 8 8 8 1.41-1.41-5.58-5.59h12.17v-2z" }
    )
    ]
  ),
  'add-circle-outline': r.g([
    r.path({ d: "M13 7h-2v4h-4v2h4v4h2v-4h4v-2h-4v-4zm-1-5c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" }
    )
    ]
  )
})

module.exports = React.createClass({

  propTypes: {
    model: React.PropTypes.object,
    route: React.PropTypes.object,
  },

  getDefaultProps: function () {
    return {
      model: {},
      route: {
        query: {}
      }
    }
  },

  render: function () {
    var model = this.props.model
    var route = this.props.route

    var links = model.relationshipGraph ? model.relationshipGraph.getLinks() : []

    //TODO different view modes
    var view
    if (route.query.view === 'list') {
      view = this.renderListFilter()
    } else {
      view = this.renderGraphFilter()
    }

    debug('model.route', route)

    return r.div(
      { id: 'sidebar-wrapper' },
      [
        r.ul( { className: 'sidebar-nav'}, [
          r.li({ className: 'sidebar-brand'}, [
            r.a({ href: '#'}, 'Craftworks'   )
          ]),
          view,
          r.div({}, this.props.children),
        ])
      ]
    )
  },

  renderGraphFilter: function () {
    return r.ul({ className: 'graph-filter-control' }, [
      r.input(),
      r.li({})
    ])
  },

  renderListFilter: function () {

  },

  componentDidMount: function () {
    this.props.model.on('change', function (model, val) {
      this.forceUpdate()
    }, this)
  }
})

@@ -1299,16 +1299,435 @@
 %0A    %7D%0A%0A
+    //link.data.rolesByType: %7B%0A//       steward: %7B%0A//             agent: %7B%0A//               id: 'people/charlie'%0A//             %7D%0A//       %7D,%0A//       stewardee: %7B%0A//             agent: %7B%0A//               '@id': %22http://localhost:3000/api/people/jon%22,%0A//               id: '/people/jon'%0A//             %7D%0A//       %7D%0A//     %7D%0A%0A%0A%0A    model.relationshipGraph.forEachLink(function (link) %7B%0A      debug('link', link)%0A%0A    %7D)%0A
     debu

add data model notes