import React, { Component } from 'react';

import style from './style.css';
import CategoryLabel from './categoryLabel';
import DetailList from './detailList';

const DEFAULT_FIELDS = ['symbol', 'gene_symbol', 'name', 'gene_synonyms', 'synonyms', 'sourceHref', 'geneId', 'species', 'type'];

class ResultsList extends Component {
  renderHighlightedValues(highlight) {
    let _data = highlight;
    let _fields = Object.keys(_data).filter( d => {
      return (DEFAULT_FIELDS.indexOf(d) < 0);
    });
    return <DetailList data={_data} fields={_fields} />;
  }

  renderHeader(d) {
    return (
      <div>
        <span className={style.resultCatLabel}><CategoryLabel category={d.category} /></span>
        <h4>
          <a dangerouslySetInnerHTML={{ __html: d.display_name }} href={d.href} target='_new' />
        </h4>
      </div>
    );
  }

  renderDetailFromFields(d, fields) {
    return <DetailList data={d} fields={fields} />;
  }

  renderDiseaseEntry(d, i) {
    let fields = ['synonyms', 'omim_id'];
    return (
      <div className={style.resultContainer} key={`sr${i}`}>
        {this.renderHeader(d)}
        {this.renderDetailFromFields(d, fields)}
        <hr />
      </div>
    );
  }

  renderGeneEntry(d, i) {
    let topFields = ['name', 'synonyms'];
    let bottomFields = ['species', 'gene_type'];
    return (
      <div className={style.resultContainer} key={`sr${i}`}>
        {this.renderHeader(d)}
          {this.renderDetailFromFields(d, topFields)}
          <div className={style.detailContainer}>
            <span className={style.detailLabel}><strong>Source:</strong> </span>
            <span><a dangerouslySetInnerHTML={{ __html: d.geneId }} href={d.sourceHref} target='_new' /></span>
          </div>
          {this.renderDetailFromFields(d, bottomFields)}
          {this.renderHighlightedValues(d.highlight)}
        <hr />
      </div>
    );
  }

  renderGoEntry(d, i) {
    let fields = ['synonyms', 'go_branch'];
    return (
      <div className={style.resultContainer} key={`sr${i}`}>
        {this.renderHeader(d)}
        {this.renderDetailFromFields(d, fields)}
        <hr />
      </div>
    );
  }

  renderOrthologGroupEntry(d, i) {
    let fields = ['associated_genes'];
    return (
      <div className={style.resultContainer} key={`sr${i}`}>
        {this.renderHeader(d)}
        {this.renderDetailFromFields(d, fields)}
        <hr />
      </div>
    );
  }

  renderRows() {
    return this.props.entries.map( (d, i) => {
      switch(d.category) {
      case 'ortholog group':
        return this.renderOrthologGroupEntry(d, i);
      case 'disease':
        return this.renderDiseaseEntry(d, i);
      case 'gene':
        return this.renderGeneEntry(d, i);
      case 'go':
        return this.renderGoEntry(d, i);
      default:
        return this.renderGeneEntry(d, i);
      }
    });
  }

  render() {
    return (
      <div>
        {this.renderRows()}
      </div>
    );
  }
}

ResultsList.propTypes = {
  entries: React.PropTypes.array
};

export default ResultsList;

@@ -259,17 +259,18 @@
 ', 'gene
-I
+_i
 d', 'spe
@@ -945,30 +945,30 @@
  %7D%0A%0A  render
-Diseas
+NonGen
 eEntry(d, i)
@@ -970,53 +970,19 @@
 d, i
-) %7B%0A    let fields = %5B'synonyms', 'omim_id'%5D;
+, fields) %7B
 %0A   
@@ -1124,32 +1124,84 @@
 lds(d, fields)%7D%0A
+        %7Bthis.renderHighlightedValues(d.highlight)%7D%0A
         %3Chr /%3E%0A 
@@ -1693,17 +1693,18 @@
 : d.gene
-I
+_i
 d %7D%7D hre
@@ -1924,28 +1924,21 @@
 nder
-GoEntry(d, i
+Rows(
 ) %7B%0A    
 let 
@@ -1937,277 +1937,148 @@
     
-let fields = %5B'synonyms', 'go_branch'%5D;%0A    return (%0A      %3Cdiv className=%7Bstyle.resultContainer%7D key=%7B%60sr$%7Bi%7D%60%7D%3E%0A        %7Bthis.renderHeader(d)%7D%0A        %7Bthis.renderDetailFromFields(d, fields)%7D%0A        %3Chr /%3E%0A      %3C/div%3E%0A    );%0A  %7D%0A%0A  renderOrthologGroupEntry(d, i) %7B%0A
+return this.props.entries.map( (d, i) =%3E %7B%0A      if (d.category === 'gene') %7B%0A        return this.renderGeneEntry(d, i);%0A      %7D else %7B%0A    
     
@@ -2090,611 +2090,224 @@
 ield
+Val
 s = 
-%5B'associated_genes'%5D;%0A    return (%0A      %3Cdiv className=%7Bstyle.resultContainer%7D key=%7B%60sr$%7Bi%7D%60%7D%3E%0A        %7Bthis.renderHeader(d)%7D%0A        %7Bthis.renderDetailFromFields(d, fields)%7D%0A        %3Chr /%3E%0A      %3C/div%3E%0A    );%0A  %7D%0A%0A  renderRows() %7B%0A    return this.props.entries.map( (d, i) =%3E %7B%0A      switch(d.category) %7B%0A      case 'ortholog group':%0A        return this.renderOrthologGroupEntry(d, i);%0A      case 'disease':%0A        return this.renderDiseaseEntry(d, i);%0A      case 'gene':%0A        return this.renderGeneEntry(d, i);%0A      case 'go':%0A        return this.renderGoEntry(d, i);%0A      default:%0A
+%7B%0A          'disease': %5B'synonyms', 'omim_id'%5D,%0A          'go': %5B'synonyms', 'go_branch'%5D,%0A          'ortholog group': %5B'associated_genes'%5D%0A        %7D;%0A        let fields = fieldVals%5Bd.category%5D %7C%7C %5B%5D;%0A 
        
- 
 retu
@@ -2312,32 +2312,35 @@
 turn this.render
+Non
 GeneEntry(d, i);
@@ -2329,32 +2329,40 @@
 onGeneEntry(d, i
+, fields
 );%0A      %7D%0A    %7D

simplify results list