window.Products = React.createClass({
    getInitialState: function () {
        return {
            products: [],
            productCount: 0,
            apiError: false,
        };
    },
    /**
     * Component setup/initialization, fetch cart information from the API
     */
    componentDidMount: function () {
        let successCallback = function (componentReference, products) {
            if (products.length > 0) {
                let orderRequestForm = document.getElementById('orderRequest');
                orderRequestForm.style.display = "block";
                componentReference.setState({products: products});
                componentReference.props.setCurrency(products[0].currency);
                componentReference.computeGrandTotal();
            }
            else {
                let errorMsg = {
                    ['message']: "Your cart is currently empty.",
                    ['linkText']: "Continue Shopping",
                    ['link']: "/education"
                };
                componentReference.props.setErrorMessage(errorMsg);
                componentReference.props.setAPIError(true);
                componentReference.props.setLoading(false);
            }
            componentReference.props.setLoading(false);
        };

        let failCallback = function (componentReference) {

            componentReference.props.setAPIError(true);
            componentReference.props.setLoading(false);
        };

        getCart(this, successCallback, failCallback);
    },
    /**
     * The grand total computation
     */
    computeGrandTotal: function () {
        let grandTotal = 0;
        this.state.products.map(function (product) {
            grandTotal = grandTotal + (product.quantity * product.price);
        });
        this.props.setGrandTotal(grandTotal);
    },
    render: function () {
        return (
            <tbody className="prod" id="innerItems">
            {
                this.state.products.map(function (product, i) {
                    let title = product.title.replace("&amp;", "&");
                    let price = (parseFloat(product.price)).toFixed(2);
                    let priceTotal = product.price * product.quantity;
                    return (
                        <tr key={i}>
                            <td><p className="productQuantity">{product.quantity}</p></td>
                            <td className="row">
                                <div className="twelve columns"><h3 style={{marginTop: 0, paddingTop: 0}}><a
                                    href={'/' + product.isbn} className="productTitle">{title}</a></h3>
                                    <dl>
                                        <dt className="productDetails">Format:</dt>
                                        <dd className="productDetails">{product.format}</dd>
                                        <dt className="productDetails">ISBN:</dt>
                                        <dd className="productDetails productISBN">{product.isbn}</dd>
                                    </dl>
                                </div>
                            </td>
                            <td className="price-cell">
                                <span className="price large productTotal">
                                    {this.props.getCurrency()}{(parseFloat(priceTotal)).toFixed(2)}
                                </span>
                                <span className="small vat productPrice">{this.props.getCurrency()}{price} / item</span>
                            </td>
                        </tr>
                    );
                }.bind(this))
            }
            </tbody>
        );
    }
});