var React = require('react');
var SubnavItemModule = require('../modules/subnav-filter-item-module');
var SubnavStore = require('../../stores/subnav-store');
var Link = require('react-router-component').Link;

function getSubnavItems() {

  return {subnavItems: SubnavStore.getSubnavItems()}
}

var SubnavArea = React.createClass({

  getInitialState:function() {

    return getSubnavItems();
  },

  componentWillMount:function(){

    console.log('%c subnav-area.js ::: ADDING Listener: SubnavStore.addSubnavListener(this._onChange)', 'background: #222; color: salmon;');
    SubnavStore.addChangeListener(this._onChange, 'subnav-area.js');
  },

  componentWillUnmount:function() {

    SubnavStore.removeChangeListener(this._onChange)
  },

  _onChange: function(){

    console.log('%c subnav-area.js ::: _onChange() called!', 'background: #222; color: salmon', 'Next func --> this.setState(getSubnavItems())');
    this.setState(getSubnavItems())
  },

  render:function() {

    if (this.state.subnavItems[0].type != undefined) {

      var subnavType = this.state.subnavItems[0].type;
      var subnavItems = this.state.subnavItems[0].links.map(function(subnavItem){

        return (

          <SubnavItemModule key={subnavItem._id} _id={subnavItem._id} _text={subnavItem._text} active={subnavItem.active} />
        );
      })
    }

    return (

      <div className="subnav">
        <div className="container">
        <p className="legend">{this.state.subnavItems[0].legend}</p>
        {subnavItems}
        </div>
      </div>
    )
  }
});

module.exports = SubnavArea;