var React = require('react')
var cx = require('classnames')
var PT = React.PropTypes

var PaperItem = require('./item')
var extend = require('../../util/extend')
var Listener = require('../../listener')
var TableOfContents = require('./toc')

var PaperView = React.createClass({
  mixins: [
    Listener(function (store, props) {
      return {
        root: store.view.root,
        mode: store.view.mode,
        isActive: store.isActiveView(),
      }
    })
  ],

  propTypes: {
    plugins: PT.array,
    nodePlugins: PT.array,

    keys: PT.object,
  },

  componentDidUpdate: function (prevProps) {
    if (this.props.store !== prevProps.store) {
      var e = this.props.store.events
      this.listen(e.rootChanged(), e.modeChanged(), e.activeViewChanged())
    }
  },

  componentWillMount: function () {
    var e = this.props.store.events
    this.listen(e.rootChanged(), e.modeChanged(), e.activeViewChanged())
  },

  fromMix: function (part) {
    if (!this.props.plugins) return
    var items = []
    for (var i=0; i<this.props.plugins.length; i++) {
      var plugin = this.props.plugins[i].blocks
      if (!plugin || !plugin[part]) continue;
      items.push(plugin[part](this.props.store.actions, this.state, this.props.store))
    }
    if (!items.length) return null
    return items
  },

  render: function () {
    var className = 'paper paper-' + this.state.mode
    if (this.state.isActive) className += ' paper-active'
    var bodies = {
      default: {editor: null, renderer: null}
    }
    if (this.props.nodePlugins) {
      for (var i=0; i<this.props.nodePlugins.length; i++) {
        if (this.props.nodePlugins[i].bodies) {
          bodies = extend(bodies, this.props.nodePlugins[i].bodies)
        }
      }
    }
    return <div className={className}>
      <TableOfContents root={true} store={this.props.store} id={this.props.store.view.root}/>
      {this.fromMix('top')}
      {PaperItem({
        depth: 0,
        store: this.props.store,
        plugins: this.props.nodePlugins,
        keys: this.props.keys.insert,
        bodies: bodies,
        isRoot: true,
        id: this.props.store.view.root
      })}
      {this.fromMix('bottom')}
    </div>
  },

})

module.exports = PaperView