var ReactDOM = require('react-dom');
var React = require('react');
var Select = require('react-select');
var Slider = require('rc-slider');

var Expression = require('./Expression');
var ClubExpr = require('../index');

module.exports = React.createClass({
  getInitialState: function() {
    return {
      expressions: ClubExpr.expressions.map(function (exprObj) {
        exprObj.properties = ClubExpr.properties(exprObj.expr);
        return exprObj;
      }),
      filters: {},
      nature: 'All',
      depthRange: [1, 7]
    };
  },
  _filter: function(expr) {
    var bool = true;
    var filters = this.state.filters;
    Object.keys(filters).forEach(function (key) {
      if (!filters[key](expr)) {
        bool = false;
        return false;  // Stop the loop!
      }
    });
    return bool;
  },
  _onNature: function(natureObj) {
    var nature = natureObj.value;
    var filters = this.state.filters;
    if (nature == 'All') {
      delete filters.nature;
    } else {
      filters.nature = function (exprObj) {
        return exprObj.properties.nature == nature;
      };
    }
    this.setState({
      nature: nature,
      filters: filters
    });
  },
  _onDepth: function(depthRange) {
    var min = depthRange[0];
    var max = depthRange[1];
    var filters = this.state.filters;
    filters.depth = function (exprObj) {
          var exprDepth = exprObj.properties.depth;
          return min <= exprDepth && exprDepth <= max;
    };
    this.setState({
      depthRange: depthRange,
      filters: filters
    });
  },
  render: function() {
    var options = [
        { value: 'All', label: 'Toutes les natures' },
        { value: 'Somme', label: 'Sommes' },
        { value: 'Diff', label: 'Différences' },
        { value: 'Opposé', label: 'Opposés' },
        { value: 'Produit', label: 'Produits' },
        { value: 'Quotient', label: 'Quotients' },
        { value: 'Inverse', label: 'Inverses' },
        { value: 'Carré', label: 'Carrés' },
        { value: 'Racine', label: 'Racines' },
        { value: 'Puissance', label: 'Puissances' }
    ];
    return <div>
    <Select
        options={options}
        value={this.state.nature}
        clearable={false}
        onChange={this._onNature}
    />
    Profondeur 
    <Slider
        min={1} max={7} range={true}
        value={this.state.depthRange}
        onChange={this._onDepth}
        marks={{'1':'1', '2':'2', '3':'3', '4':'4', '5':'5', '6':'6', '7':'7'}}
    />
    <ul>
      {this.state.expressions.filter(this._filter).map(function(exprObj, idx){
        return <li key={idx}>
                 {(idx<9?"  ":"") + (idx+1)} : <Expression expr={exprObj.expr} />
               </li>;
      })}
    </ul>
    </div>;
  }
});

@@ -523,12 +523,38 @@
  %5B1,
+ 7%5D,%0A      nbOpsRange: %5B1,
  7%5D%0A
-
     
@@ -1569,16 +1569,388 @@
 );%0A  %7D,%0A
+  _onNbOps: function(nbOpsRange) %7B%0A    var min = nbOpsRange%5B0%5D;%0A    var max = nbOpsRange%5B1%5D;%0A    var filters = this.state.filters;%0A    filters.nbOps = function (exprObj) %7B%0A          var exprNbOps = exprObj.properties.nbOps;%0A          return min %3C= exprNbOps && exprNbOps %3C= max;%0A    %7D;%0A    this.setState(%7B%0A      nbOpsRange: nbOpsRange,%0A      filters: filters%0A    %7D);%0A  %7D,%0A
   render
@@ -2739,16 +2739,16 @@
 hRange%7D%0A
-
         
@@ -2855,24 +2855,253 @@
 7'%7D%7D%0A    /%3E%0A
+    Nbre d%E2%80%99op%C3%A9rations%0A    %3CSlider%0A        min=%7B1%7D max=%7B7%7D range=%7Btrue%7D%0A        value=%7Bthis.state.nbOpsRange%7D%0A        onChange=%7Bthis._onNbOps%7D%0A        marks=%7B%7B'1':'1', '2':'2', '3':'3', '4':'4', '5':'5', '6':'6', '7':'7'%7D%7D%0A    /%3E%0A
     %3Cul%3E%0A   

Implement the nbOps slider