class ProductsbyCategory extends ReportBase {
    constructor(props: any) {
        super(props);
        this.state = {
            products: new wijmo.odata.ODataCollectionView(Util.getUrl(), 'Products', {
                sortDescriptions: ['ProductName']
            }),
            categories: new wijmo.odata.ODataCollectionView(Util.getUrl(), 'Categories', {
                fields: ['CategoryID', 'CategoryName', 'Description'],
                sortDescriptions: ['CategoryName']
            }),
            today: new Date(),
        };
    }

    render() {
        return <Spinner loading={this.state.loading}>
            <h1 style={{ backgroundColor: '#cccccc', padding: '6px' }}>
                Products By Category
                <br />
                <span style={{ fontSize: '50%', fontStyle: 'italic' }}>
                    As of {Util.format(this.state.today, 'd')}
                </span>
            </h1>
            {
                this.state.categories.items.map((category, index) => {
                    return <ProductsbyCategoryCategory category={category} products={this.state.products} key={index}/>
                })
            }
        </Spinner>
    }
}

class ProductsbyCategoryCategory extends React.Component<any, any> {
    render() {
        return <div style={{ pageBreakInside: 'avoid' }}>
            <h2>
                {this.props.category.CategoryName}
            </h2>

            <div style={{ marginLeft: '12pt', columnCount: 3 }}>
                {
                    Util.select(this.props.products, 'CategoryID', this.props.category.CategoryID).map((product, index) => {
                        return <div key={index}>
                            {index + 1}) {product.ProductName}
                        </div>;
                    })
                }
            </div>
        </div>
    }
}