/**
 * The main component that hooks all elements together
 *
 * @type {*|Function}
 *
 * Hierarchy:
 *
 * Cart Container
 *   |-->Products
 *   |     |-->Product
 *   |-->Clear Cart
 *   |-->Grand Total
 *   |-->Checkout
 *
 *
 * @author Rai Icasiano <ricasiano at cambridge dot org>
 */
const CartContainer = React.createClass({
    getInitialState: function() {
        return {
            loading: true,
            currency: false,
            APIError: false,
            confirmModal: false,
            confirmModalAction: false,
            confirmModalErrorMessage: false,
            grandTotal: 0
        };
    },
    getCurrency: function(){
        return this.state.currency;
    },
    setCurrency: function(currency) {
        let convertedCurrency = currency.replace("&pound;", "£");
        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});
    },

    getConfirmModal: function () {
        return this.state.confirmModal;
    },
    setConfirmModal: function (confirmModal) {
        this.setState({confirmModal: confirmModal});
    },

    getConfirmModalAction: function () {
      return this.state.confirmModalAction;
    },
    setConfirmModalAction: function (confirmModalAction) {
        this.setState({confirmModalAction: confirmModalAction});
    },

    getConfirmModalErrorMessage: function () {
        return this.state.confirmModalErrorMessage
    },
    setConfirmModalErrorMessage: function (confirmModalErrorMessage) {
        this.setState({confirmModalErrorMessage: confirmModalErrorMessage});
    },

    render: function () {
        return (
            <div>
                <AjaxLoader getLoading={this.getLoading} />
                <ConfirmModal
                    getConfirmModal={this.getConfirmModal}
                    getConfirmModalAction={this.getConfirmModalAction}
                    getConfirmModalErrorMessage={this.getConfirmModalErrorMessage}
                    setConfirmModal={this.setConfirmModal}
                />
                <APIError getAPIError={this.getAPIError} />
                <Products
                          setCurrency={this.setCurrency}
                          getCurrency={this.getCurrency}
                          setGrandTotal={this.setGrandTotal}
                          setAPIError={this.setAPIError}
                          setLoading={this.setLoading}
                          setConfirmModal={this.setConfirmModal}
                          setConfirmModalAction={this.setConfirmModalAction}
                          setConfirmModalErrorMessage={this.setConfirmModalErrorMessage}
                />
                <div className="cart_button_container twelve columns" style={{'margin': '6px 0 20px'}}>
                    <ClearCart
                        setAPIError={this.setAPIError}
                        setLoading={this.setLoading}
                        setConfirmModal={this.setConfirmModal}
                        setConfirmModalAction={this.setConfirmModalAction}
                        setConfirmModalErrorMessage={this.setConfirmModalErrorMessage}
                    />
                    <GrandTotal
                        getCurrency={this.getCurrency}
                        getGrandTotal={this.getGrandTotal}
                    />
                </div>
                <Checkout
                    setAPIError={this.setAPIError}
                    setLoading={this.setLoading}
                />
            </div>
        );
    }
});

ReactDOM.render(<CartContainer/>, document.getElementById('cartContainer'));