import _ from 'lodash';
import React from 'react';
import Classnames from 'classnames';



var Tab = React.createClass({
  propTypes: {
    data: React.PropTypes.object.isRequired,
    onSelect: React.PropTypes.func.isRequired,
    active: React.PropTypes.bool,
    attention: React.PropTypes.object,
  },

  render: function() {
    let classes = {
      'tab': true,
      active: !!this.props.active,
      attention: null,
    };

    let attention = null;
    if (this.props.attention) {
      attention = (
        <div className="attention">{this.props.attention}</div>
      );
    }

    return (
      <div className={Classnames(classes)} onClick={this._onClick}>
        {attention}
        <div className="text">{this.props.data.desc}</div>
      </div>
    );
  },

  _onClick: function() {
    this.props.onSelect(this.props.data);
  },
});



module.exports = React.createClass({
  propTypes: {
    items: React.PropTypes.array.isRequired,
    selectedItem: React.PropTypes.string.isRequired,
    onSelect: React.PropTypes.func.isRequired,
    className: React.PropTypes.string,
  },

  getDefaultProps: function() {
    return {
      className: null,
    }
  },

  render: function() {
    let { items, className, selectedItem } = this.props;

    var primaryLinks = [];

    items.forEach((item) => {
      let attention = null;

      if (item.showIf) {
        if (!item.showIf.call(this)) {
          return;
        }
      }

      if (item.attention) {
        attention = item.attention.call(this);
      }

      primaryLinks.push(
        <Tab 
          key={item.id}
          data={item} 
          active={item.id === this.props.selectedItem} 
          attention={attention}
          onSelect={this.props.onSelect} />
      );
    });

    let classes = Classnames('tab-menu', className);

    return (
      <div className={classes}>
        {primaryLinks}
      </div>
    );
  },


});
