/**
 * The main component that hooks all elements together
 *
 * @type {*|Function}
 *
 * Hierarchy:
 *
 * Order Request Form CartContainer
 *   |-->Products
 *   |     |-->Product
 *   |-->Grand Total
 *   |-->Checkout
 */
window.OrderRequestFormCartContainer = React.createClass({
    getInitialState: function () {
        return {
            loading: true,
            currency: false,
            APIError: false,
            grandTotal: 0,
            errorMsg: {
                ['message']: "There was an error retrieving your cart. Please bear with us while we are fixing this issue.",
                ['linkText']: "Back to Homepage",
                ['link']: "/education"
            }
        };
    },
    getCurrency: function () {
        return this.state.currency;
    },
    setCurrency: function (currency) {
        let convertedCurrency = currency.replace("£", "£");
        this.setState({currency: convertedCurrency});
    },

    getGrandTotal: function () {
        return this.state.grandTotal.toLocaleString('en-US', {minimumFractionDigits: 2});
    },
    setGrandTotal: function (grandTotal) {
        this.setState({grandTotal: grandTotal});
    },

    getLoading: function () {
        return this.state.loading;
    },
    setLoading: function (loading) {
        this.setState({loading: loading});
    },

    getAPIError: function () {
        return this.state.APIError;
    },
    setAPIError: function (APIError) {
        this.setState({APIError: APIError});
    },
    getErrorMessage: function () {
        return this.state.errorMsg;
    },
    setErrorMessage: function (errorMsg) {
        this.setState({errorMsg: errorMsg});
    },

    render: function () {
        return (
            <div>
                <EmptyCartError getLoading={this.getLoading} getAPIError={this.getAPIError}
                                getErrorMessage={this.state.errorMsg}/>
                <table className="order-summary basket">
                    <tbody>
                    <tr>
                        <th className="quantity">
                            <abbr title="Quantity">Qty</abbr>
                        </th>
                        <th>Product Information</th>
                        <th className="price-cell">Price</th>
                    </tr>
                    </tbody>
                    <Products
                        getAPIError={this.getAPIError}
                        setCurrency={this.setCurrency}
                        getCurrency={this.getCurrency}
                        setGrandTotal={this.setGrandTotal}
                        setAPIError={this.setAPIError}
                        setLoading={this.setLoading}
                        setErrorMessage={this.setErrorMessage}
                    />
                    <tbody className="totals">
                    <tr>
                        <td className="totals-row">&nbsp;</td>
                        <td className="totalPriceLabelContainer">
                            <span className="totalPriceLabel"> Total cost:</span>
                        </td>
                        <td>
                    <span className="priceTotal large" id="total">
                        <strong id="totalCartPriceContainer">{this.getCurrency()}{this.getGrandTotal()}</strong>
                    </span>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <Checkout handleSubmit={this.props.handleSubmit}
                    setAPIError={this.setAPIError}
                    setLoading={this.setLoading}
                />
            </div>
        );
    }
});