import React, { Component, PropTypes } from 'react';
import OrthologyTable from './orthologyTable';

const caseInsensitiveCompare = (stringA, stringB) => {
  const stringALowerCase = stringA.toLowerCase();
  const stringBLowerCase = stringB.toLowerCase();
  if (stringALowerCase < stringBLowerCase) {
    return -1;
  } else if (stringALowerCase > stringBLowerCase) {
    return 1;
  } else {
    return 0;
  }
};

class OrthologyFilteredTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filterScoreGreaterThan: 0,
      filterMethod: null,
      filterBest: false,
      filterReverseBest: false
    };
  }

  filterCallback(dat) {
    const meetMethodFilter = this.state.filterMethod ?
      dat.predictionMethodsMatched.indexOf(this.state.filterMethod) > -1 :
      true;
    return (
      meetMethodFilter &&
      dat.predictionMethodsMatched.length > this.state.filterScoreGreaterThan &&
      (this.state.filterBest ? dat.isBestScore : true) &&
      (this.state.filterReverseBest ? dat.isBestRevScore : true)
    );
  }

  updateFilterMethod(event) {
    this.setState({
      filterMethod: event.target.value
    });
  }

  updateBestScoreFilter(event) {
    this.setState({
      filterBest: event.target.checked
    });
  }

  updateBestReverseScoreFilter(event) {
    this.setState({
      filterReverseBest: event.target.checked
    });
  }

  updateFilterScoreGreaterThan(event) {
    this.setState({
      filterScoreGreaterThan: event.target.value
    });
  }

  render() {
    const filteredData = this.props.data.filter((dat) => this.filterCallback(dat));
    const all_methods = this.props.data[0].predictionMethodsMatched.concat(
      this.props.data[0].predictionMethodsNotCalled,
      this.props.data[0].predictionMethodsNotMatched
    ).sort(caseInsensitiveCompare);
    return (
      <div>
        <div>
          <label>
            Best Score Only:
            <input
              checked={this.state.filterBest}
              onChange={(event) => this.updateBestScoreFilter(event)}
              type="checkbox"
            />
          </label>
          <label>
            Best Reverse Score Only:
            <input
              checked={this.state.filterReverseBest}
              onChange={(event) => this.updateBestReverseScoreFilter(event)}
              type="checkbox"
            />
          </label>
          <label>
            Score:
            <select
              onChange={(event) => this.updateFilterScoreGreaterThan(event)}
              value={this.state.filterScoreGreaterThan}
            >
              <option value={0}>> 0</option>
              {
                all_methods.map((method, index) => {
                  const scoreGreaterThanValue = index + 1;
                  return <option value={scoreGreaterThanValue}>> {scoreGreaterThanValue}</option>;
                })
              }
            </select>
          </label>
          <label>
            Methods:
            <select
              onChange={(event) => this.updateFilterMethod(event)}
              value={this.state.filterMethod}
            >
              <option>All</option>
              {
                all_methods.map((method) => (
                  <option key={method} value={method}>{method}</option>
                ))
              }
            </select>
          </label>
        </div>
        <OrthologyTable data={filteredData} />
      </div>
    );
  }
}

OrthologyFilteredTable.propTypes = {
  // filterScoreGreaterThan: PropTypes.number,
  // filterMethods: PropTypes.string,
  // filterBest: PropTypes.bool,
  // filterReverseBest: PropTypes.bool
  data: PropTypes.arrayOf(
    PropTypes.shape({
      gene2AgrPrimaryId: PropTypes.string,
      gene2Symbol: PropTypes.string,
      gene2Species: PropTypes.number,
      gene2SpeciesName: PropTypes.string,
      predictionMethodsMatched: PropTypes.arrayOf(PropTypes.string),
      predictionMethodsNotCalled: PropTypes.arrayOf(PropTypes.string),
      predictionMethodsNotMatched: PropTypes.arrayOf(PropTypes.string),
      isBestScore: PropTypes.bool,
      isBestRevScore: PropTypes.bool,
    })
  )
};

export default OrthologyFilteredTable;

@@ -631,16 +631,43 @@
 t: false
+,%0A      filterSpecies: null
 %0A    %7D;%0A
@@ -1079,16 +1079,111 @@
  : true)
+ &&%0A      (this.state.filterSpecies ? dat.gene2SpeciesName === this.state.filterSpecies : true)
 %0A    );%0A
@@ -1267,32 +1267,70 @@
 ent.target.value
+ === 'all' ? null : event.target.value
 %0A    %7D);%0A  %7D%0A%0A  
@@ -1673,16 +1673,194 @@
 );%0A  %7D%0A%0A
+  updateFilterSpecies(event) %7B%0A    console.log(event.target.value);%0A    this.setState(%7B%0A      filterSpecies: event.target.value === 'all' ? null : event.target.value%0A    %7D)%0A  %7D%0A%0A
   render
@@ -3281,32 +3281,757 @@
         %3Clabel%3E%0A
+            Species:%0A            %3Cselect%0A              onChange=%7B(event) =%3E this.updateFilterSpecies(event)%7D%0A              value=%7Bthis.state.filterSpecies%7D%0A            %3E%0A              %3Coption value=%22all%22%3EAll%3C/option%3E%0A              %7B%0A                this.props.data.reduce((all_species, dat) =%3E %7B%0A                  if (all_species.indexOf(dat.gene2SpeciesName) === -1) %7B%0A                    return all_species.concat(%5Bdat.gene2SpeciesName%5D);%0A                  %7D else %7B%0A                    return all_species;%0A                  %7D%0A                %7D, %5B%5D).map((species) =%3E (%0A                  %3Coption value=%7Bspecies%7D%3E%7Bspecies%7D%3C/option%3E%0A                ))%0A              %7D%0A            %3C/select%3E%0A          %3C/label%3E%0A          %3Clabel%3E%0A
             Meth
@@ -4203,16 +4203,28 @@
  %3Coption
+ value=%22all%22
 %3EAll%3C/op

apply species filter UI