import React from 'react';
                import ReactDOM from 'react-dom';

                // 表格数据
                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'}
                ];


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


                // 每一个商品组件
                let ProductRow = React.createClass({
                    render (){
                        let name = '';
                        if(this.props.product.stocked){
                            name = this.props.product.name;
                        }else{
                            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 (){
                        let rows = [];
                        let lastCategory = null;
                        this.props.products.forEach((product, key) => {
                            // 过滤搜索关键字和选中checkbox
                            if(product.name.indexOf(this.props.filterText) === -1 || 
                            !product.stocked && this.props.inStockOnly) return false;
                            
                            if(product.category !== lastCategory){
                                // 插入表头组件
                                rows.push(
                                    <ProductCategoryRow key={key} category={product.category}>
                                    </ProductCategoryRow>
                                );
                                lastCategory = product.category;
                            }
                            // 插入内容组件
                            rows.push(<ProductRow product={product} key={product.name}></ProductRow>);
                        });

                        return (
                            <table>
                                <thead>
                                    <tr>
                                        <th>name</th>
                                        <th>Price</th>
                                    </tr>
                                </thead>
                                <tbody>{rows}</tbody>
                            </table>
                        );
                    }
                });
                

                // 搜索组件
                let SearchBar = React.createClass({
                    // 搜索回调函数
                    handleChange (){
                        this.props.onUserInput(
                            this.refs.filterTextInput.value,
                            this.refs.inStockOnlyInput.checked
                        );
                    },

                    render (){
                        return (
                            <form>
                                <input 
                                    type="text" 
                                    placeholder="Search..." 
                                    value={this.props.filterText}
                                    ref="filterTextInput"
                                    onChange={this.handleChange}
                                />
                                <p>
                                    <input 
                                        type="checkbox" 
                                        checked={this.props.inStockOnly}
                                        ref="inStockOnlyInput"
                                        onChange={this.handleChange}
                                    />
                                    Only show
                                </p>
                            </form>
                        );
                    }
                });
                

                // Box组件
                let FilterableProductTable = React.createClass({
                    getInitialState (){
                        return {
                            filterText : '',
                            inStockOnly : false
                        }
                    },

                    handleUserInput (filterText, inStockOnly){
                        this.setState({
                            filterText : filterText,
                            inStockOnly : inStockOnly
                        });
                    },

                    render (){
                        return(
                            <div>
                                <SearchBar
                                    filterText={this.state.filterText}
                                    inStockOnly={this.state.inStockOnly}
                                    onUserInput={this.handleUserInput}
                                >
                                </SearchBar>
                                <ProductTable 
                                    filterText={this.state.filterText}
                                    inStockOnly={this.state.inStockOnly}
                                    products={this.props.products}
                                >
                                </ProductTable>
                            </div>
                        );
                    }
                });


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