var React               = require("react");
var FeatureActions      = require('../../stores/FeatureToggleActions');
var FeatureToggleStore  = require('../../stores/FeatureToggleStore');

var ArchiveFeatureComponent = React.createClass({
  getInitialState: function() {
    return {
      archivedFeatures: FeatureToggleStore.getArchivedToggles()
    };
  },

  onStoreChange: function() {
    this.setState({
      archivedFeatures: FeatureToggleStore.getArchivedToggles()
    });
  },

  componentDidMount: function() {
    this.unsubscribe = FeatureToggleStore.listen(this.onStoreChange);
  },

  componentWillUnmount: function() {
    this.unsubscribe();
  },

  onRevive: function(item) {
    FeatureActions.revive(item);
  },

  render: function () {
    return (
      <div>
        <h1>Archived feature toggles</h1>
        <table className="outerborder man">
          <thead>
            <tr>
              <th>Name</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {this.state.archivedFeatures.map(this.renderArchivedItem)}
          </tbody>
        </table>
      </div>
      );
  },

  renderArchivedItem: function(f) {
    return (
      <tr key={f.name}>
        <td>
          {f.name}<br />
          <span className="opaque smalltext word-break">{f.description}</span>
        </td>
        <td className="rightify" width="150">
          <button onClick={this.onRevive.bind(this, f)} title="Revive feature toggle">
            <span className="icon-svar"></span>
          </button>
        </td>
      </tr>);
  }
});

module.exports = ArchiveFeatureComponent;