/**
 * Products sub-component
 * Provides initial api call to fetch the list of products saved on the carts
 *
 * Child: product.jsx
 *
 * @type {*|Function}
 *
 * @author Rai Icasiano <ricasiano at cambridge dot org>
 */
window.Products = React.createClass({
    getInitialState: function () {
        return {
            products: [],
            productCount: 0,
            apiError: false,
            deleteProductSuccess: false,
            clearCartSuccess: false,
            emptyCart: false,
        };
    },
    /**
     * Component setup/initialization, fetch cart information from the API
     */
    componentDidMount: function () {
        let successCallback = function(componentReference, products) {
            if (products.length > 0) {
                componentReference.setState({products: products});
                componentReference.props.setCurrency(products[0].currency);
                componentReference.computeGrandTotal();
            }
            else {
                componentReference.props.hasEmptyCart();
            }
            componentReference.props.setLoading(false);
        };

        let failCallback = function (componentReference) {
            componentReference.props.setAPIError(true);
            componentReference.props.setLoading(false);
        };

        getCart(this, successCallback, failCallback);
    },
    /**
     * Removes the item display
     *
     * @param key
     */
    removeItemFromCart: function (key) {
        let items = this.state.products;
        items.splice(key, 1);
        this.setState({products: items});
        this.computeGrandTotal();
        if (0 >= items.length) {
            this.hasEmptyCart();
        }

    },
    hasEmptyCart: function (){
        this.props.setLoading(true);
        window.location = '/education';
    },
    /**
     * Triggered by the select quantity drop down menu, updates the `products` state with the quantity for the specific
     * product
     *
     * @param key
     * @param quantity
     */
    updateGrandTotal: function(key, quantity) {
        let items = this.state.products;
        items[key].quantity = quantity;
        this.setState({products: items});
        this.computeGrandTotal();
    },
    /**
     * The grand total computation, it recomputes every time there was an update on the `products` state
     */
    computeGrandTotal: function(){
        let grandTotal = 0;
        this.state.products.map(function(product){
            grandTotal = grandTotal + (product.quantity * product.price);
        });
        this.props.setGrandTotal(grandTotal);
    },
    render: function () {
        return (
            <div>
                {
                    this.state.products.map(function (product, i) {
                        let title = product.title.replace("&amp;", "&");
                        return (<Product products={this.state.products}
                                key={i}
                                removeItemFromCart={this.removeItemFromCart}
                                hasAPIError={this.hasAPIError}
                                updateGrandTotal={this.updateGrandTotal}
                                index={i}
                                title={title}
                                thumbnail={product.thumbnail}
                                isbn={product.isbn}
                                author={product.author}
                                format={product.format}
                                availability={product.availability}
                                price={product.price}
                                currency={this.props.getCurrency()}
                                quantity={product.quantity}
                                setAPIError={this.props.setAPIError}
                                setLoading={this.props.setLoading}
                                itemTotal={product.price * product.quantity}
                                setConfirmModal={this.props.setConfirmModal}
                                setConfirmModalAction={this.props.setConfirmModalAction}
                                setConfirmModalErrorMessage={this.props.setConfirmModalErrorMessage}
                            />
                        );
                    }.bind(this))
                }
            </div>
        );
    }
});