import { default as React, Component } from 'react';
import { render } from 'react-dom';
var Style = require('../Style.js');

export class ItemList extends Component {
  constructor(props) {
    super(props);
    var self = this;
    this.state = {
      selectedItem: []
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(value) {
    this.props.onRemove(this.state.selectedItem);
    this.props.onSelect(value);
    this.setState({
      selectedItem: value
    });
  }
  render() {
    var scrollStyle = {
      overflow: "auto",
      height: "400px",
      width: "100%",
      margin: "5px",
    };
    let items = this.props.items;
    let FacetItems = [];
    items.forEach(function (item) {
      FacetItems.push(<FacetItem  key={item.key} value={item.key} doc_count={item.doc_count} countField={this.props.showCount} handleClick={this.handleClick} selectedItem={this.state.selectedItem}/>)
    }.bind(this));
    return (
      <div style={scrollStyle}>
        {FacetItems}
      </div>
    );
  }
}
class FacetItem extends Component {
  constructor(props) {
    super(props);
  }
  handleClick() {
    this.props.handleClick(this.props.value);
  }
  render() {
    var defaultStyle = {
      margin: "5px",
      padding: "3px",
    };
    var selectedStyle = {
      margin: "5px",
      padding: "3px",
      fontWeight: "bold",
    };
    let count;
    if (this.props.countField) {
      count = <span> ({this.props.doc_count}) </span>
    }
    return (
      <div onClick={this.handleClick.bind(this) } style={this.props.value === this.props.selectedItem ? selectedStyle : defaultStyle}>
        <a href="#">
          <span> {this.props.value} </span>
          {count}
        </a>
      </div>
    );
  }
}
@@ -206,29 +206,8 @@
 s);%0A
-    var self = this;%0A
     
@@ -313,78 +313,275 @@
 %7D%0A  
-handleClick(value) %7B%0A    this.props.onRemove(this.state.selectedItem);
+// Handler function is called when the list item is clicked%0A  handleClick(value) %7B%0A    // Pass the previously selected value to be removed from the query%0A    this.props.onRemove(this.state.selectedItem);%0A    // Pass the new selected value to be added to the query    
 %0A   
@@ -846,24 +846,79 @@
 let 
-FacetItems = %5B%5D;
+itemsComponent = %5B%5D;%0A    // Build the array of components for each item
 %0A   
@@ -960,36 +960,42 @@
     
-FacetItems.push(%3CFacetItem
+itemsComponent.push(%3CItem%0A     
   
+ 
 key=
@@ -1004,16 +1004,24 @@
 tem.key%7D
+%0A       
  value=%7B
@@ -1029,16 +1029,24 @@
 tem.key%7D
+%0A       
  doc_cou
@@ -1064,16 +1064,24 @@
 c_count%7D
+%0A       
  countFi
@@ -1106,16 +1106,24 @@
 owCount%7D
+%0A       
  handleC
@@ -1145,16 +1145,24 @@
 leClick%7D
+%0A       
  selecte
@@ -1273,18 +1273,22 @@
    %7B
-FacetItems
+itemsComponent
 %7D%0A  
@@ -1321,13 +1321,8 @@
 ass 
-Facet
 Item
@@ -1391,76 +1391,8 @@
   %7D%0A
-  handleClick() %7B%0A    this.props.handleClick(this.props.value);%0A  %7D%0A
   re
@@ -1674,24 +1674,25 @@
 nt%7D) %3C/span%3E
+;
 %0A    %7D%0A    r
@@ -1716,32 +1716,38 @@
 v onClick=%7Bthis.
+props.
 handleClick.bind
@@ -1745,21 +1745,35 @@
 lick
-.bind(this) %7D
+(this.props.value)%7D%0A       
  sty

Clean the code of ItemList