let ProductCategoryRow = React.createClass({
  render:  function () {
    return (<tr><th colSpan="2">{this.props.category}</th></tr>);
  }
});

let ProductRow = React.createClass({
  render: function () {
    let name = this.props.product.stocked
      ? this.props.product.name
      : <span style={{ color: "red" }}>{this.props.product.name}</span>;
    return (
      <tr>
        <td>{name}</td>
        <td>{this.props.product.price}</td>
      </tr>
    );
  }
});

let ProductTable = React.createClass({
  render: function () {
    let rows = [];
    let lastCategory = null;
    this.props.products.forEach(function (product) {
      // Apply name and stock filters.
      if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
        return;
      }
      if (product.category !== lastCategory) {
        rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
      }
      rows.push(<ProductRow product={product} key={product.name} />);
      lastCategory = product.category;
    }.bind(this));
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody>
        {rows}
        </tbody>
      </table>
    );
  }
});

let SearchBar = React.createClass({
  handleChange: function () {
    this.props.onUserInput(
      this.refs.filterTextInput.value,
      this.refs.inStockOnlyInput.checked
    );
  },
  render: function () {
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          ref="filterTextInput"
          value={this.props.filterText}
          onChange={this.handleChange}
        />
        <p>
          <input
            type="checkbox"
            ref="inStockOnlyInput"
            checked={this.props.inStockOnly}
            onChange={this.handleChange}
          />
          {" "}
          Only show products in stock
        </p>
      </form>
    );
  }
});

let FilterableProductTable = React.createClass({
  getInitialState: function () {
    let state = {
      filterText: "",
      inStockOnly: false
    };
    return state;
  },
  handleUserInput: function (filterText, inStockOnly) {
    this.setState({ filterText: filterText, inStockOnly: inStockOnly });
  },
  render: function () {
    return (
      <div>
        <SearchBar
          filterText={this.state.filterText}
          inStockOnly={this.state.inStockOnly}
          onUserInput={this.handleUserInput}
        />
        <ProductTable
          products={this.props.products}
          filterText={this.state.filterText}
          inStockOnly={this.state.inStockOnly}
        />
      </div>
    );
  }
});

let PRODUCTS = [
  { category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football" },
  { category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball" },
  { category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball" },
  { category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch" },
  { category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5" },
  { category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" }
];

ReactDOM.render(
  <FilterableProductTable products={PRODUCTS} />,
  document.getElementById("content")
);