var React = require('react')
var r = require('r-dom')
var debug = require('debug')('ui:index')
var getDefaultRoleTypes = require('graph-view/get-default-role-types')
var getRoleTypes = require('graph-view/get-role-types')
var getUniLinkLabels = require('graph-view/get-uni-link-labels')
var each = require('lodash.foreach')
var clone = require('lodash.clone')
var contains = require('lodash.contains')
var types = require('types')
var Layout = require('layout')
var extend = require('xtend')

var FourOhFourPage = require('./404')

module.exports = React.createClass({
  getInitialState: function () {
    debug('getInitialState:model.roles', this.props.model.roles)

    var initialState = {
      roleTypes: getRoleTypes(
        getDefaultRoleTypes(),
        this.props.model.roles
      ),
      linkLabels: getUniLinkLabels(this.props.model.relationshipGraph)
    }

    return initialState
  },

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

    debug('linkLabels', this.state.linkLabels)

    var props = extend(
      this.props,
      {
        roleTypes: this.state.roleTypes,
        linkLabels: this.state.linkLabels,
        updateActiveTags: this.updateActiveTags.bind(this)
      }
    )

    var Page
    if (route) {
      Page = types.indexedByCollection[route.collection].Page
    } else {
      Page = FourOhFourPage
    }

    debug('render', props)
    return (
      r(Layout, props,
        r(Page, props)
      )
    )
  },

  componentDidMount: function () {
    this.props.model.on('change', function (model, val) {
      var nextRoleTypes = getRoleTypes(
        this.state.roleTypes,
        model.relationships
      )

      var nextLinkLabels = getUniLinkLabels(model.relationshipGraph)

      this.setState({
        roleTypes: nextRoleTypes,
        linkLabels: nextLinkLabels
      })

      this.forceUpdate()
    }, this)
  },

  updateActiveTags: function (type, activeTags) {
    var tagObject = clone(this.state[type])
    debug('tagObject',  tagObject, type, activeTags)    
    var newState = {}

    each(tagObject, function (tagType, tagTypeId) {
      if (contains(activeTags, tagTypeId)) {
        tagType.active = true
      }
      else {
        tagType.active = false
      }

    })

    newState[type] = tagObject
    debug('newState', newState)
    this.setState(newState)
  }
})

@@ -1159,17 +1159,16 @@
 ctiveTag
-s
 : this.u
@@ -1181,17 +1181,60 @@
 ctiveTag
-s
+.bind(this),%0A        clearTag: this.clearTag
 .bind(th
@@ -1914,16 +1914,19 @@
 %0A  %7D,%0A%0A 
+ //
  updateA
@@ -1963,24 +1963,27 @@
 iveTags) %7B%0A 
+ //
    var tagOb
@@ -2015,18 +2015,21 @@
 ype%5D)%0A  
+//
   
+ 
 debug('t
@@ -2072,17 +2072,16 @@
 ags)
-    %0A
+%0A  //
    
- 
 var 
@@ -2094,21 +2094,28 @@
 te = %7B%7D%0A
+  //
 %0A  
+//
   
+ 
 each(tag
@@ -2151,24 +2151,27 @@
 gTypeId) %7B%0A 
+ //
      if (con
@@ -2199,24 +2199,27 @@
 TypeId)) %7B%0A 
+ //
        tagTy
@@ -2236,24 +2236,27 @@
 = true%0A 
+ //
      %7D%0A 
      els
@@ -2247,16 +2247,19 @@
      %7D%0A 
+ //
      els
@@ -2264,22 +2264,25 @@
 lse %7B%0A  
+//
       
+ 
 tagType.
@@ -2301,23 +2301,447 @@
 se%0A 
+ //
      %7D%0A
+  //%0A  //   %7D)%0A  //%0A  //   newState%5Btype%5D = tagObject%0A  //   debug('newState', newState)%0A  //   this.setState(newState)%0A  // %7D,%0A%0A  updateActiveTag: function (type, newActiveTag) %7B%0A    var newState = %7B%7D%0A    var tagObject = clone(this.state%5Btype%5D)%0A    each(tagObject, function (tagType, tagTypeId) %7B%0A      if (newActiveTag === tagTypeId %7C%7C newActiveTag === tagType.model.pluralName ) %7B%0A        tagType.active = true%0A      %7D
 %0A    %7D)%0A
 %0A   
@@ -2732,25 +2732,24 @@
    %7D%0A    %7D)%0A
-%0A
     newState
@@ -2830,12 +2830,405 @@
 ate)%0A  %7D
+,%0A%0A  clearTag: function (type, tag) %7B%0A    return function () %7B%0A      var newState = %7B%7D%0A      var tagObject = clone(this.state%5Btype%5D)%0A      each(tagObject, function (tagType, tagTypeId) %7B%0A        if (tag === tagTypeId %7C%7C tag === tagType.model.pluralName ) %7B%0A          tagType.active = false%0A        %7D%0A      %7D)%0A      newState%5Btype%5D = tagObject%0A      this.setState(newState)%0A    %7D.bind(this)%0A  %7D%0A
 %0A%7D)%0A

tag control functions in ui/index.js