/**
 * Product sub-component
 *
 * @type {*|Function}
 *
 * @author Rai Icasiano <ricasiano at cambridge dot org>
 */
window.Product = React.createClass({
    getInitialState: function() {
        return {
            itemTotal: this.props.itemTotal,
            quantity: this.props.quantity,
            isbn: this.props.isbn,
            displayAction: false
        }
    },
    /**
     * Render the quantity select element option list
     *
     * @param key
     * @returns {Array}
     */
    quantityOptionValues: function (key) {
        let options = [];
        for (let i = 1; i <= 10; ++i) {
            options.push(<option value={i} key={key + '_' + i}>{i}</option>);
        }

        return options;
    },
    /**
     * Trigger API call to delete the product
     */
    deleteProduct: function () {
        this.props.setConfirmModal(false);
        this.props.setLoading(true);
        let successCallback = function (componentReference) {
            componentReference.props.removeItemFromCart(componentReference.props.index);
            componentReference.props.setLoading(false);
        };
        let failCallback = function (componentReference) {
            componentReference.props.setAPIError(true);
            componentReference.props.setLoading(false);
        };

        //API Call
        deleteProduct(this, successCallback, failCallback, this.state.isbn);

    },
    /**
     * Updates product quantity and computes the total per product
     *
     * @param event
     */
    updateProduct: function (event) {
        let quantity = event.target.value;

        let successCallback = function (componentReference) {
            componentReference.setState({itemTotal: quantity * componentReference.props.price});
            componentReference.setState({quantity: quantity});
            componentReference.props.updateGrandTotal(componentReference.props.index, quantity);
            componentReference.props.setLoading(false);
        };
        
        let failCallback = function (componentReference) {
            componentReference.props.setAPIError(true);
            componentReference.props.setLoading(false);
        };

        //API Call
        putProduct(this, successCallback, failCallback, this.state.isbn, quantity);
    },

    deleteProductConfirmation: function() {
        this.props.setConfirmModal(true);
        this.props.setConfirmModalAction(this.deleteProduct);
        this.props.setConfirmModalErrorMessage('Are you sure you want to delete ' + this.props.title + '(' + this.props.isbn + ')?');
    },

    render: function () {
        return (
            <div className="twelve columns konakartRows">
                <div className="five columns konakartRow">
                    <div className="three columns bookCover">
                        <img src={this.props.thumbnail}
                             style={{display: 'block'}}/>
                    </div>
                    <div className="nine columns bookDetailsWrap">
                        <h5>
                            <a href={'/' + this.props.isbn}>{this.props.title}</a>
                        </h5>
                        <dl>
                            <dt>{this.props.author}
                            </dt>
                            <dd>{this.props.format} (ISBN-13: {this.props.isbn})
                            </dd>
                            <dd>
                            </dd>
                        </dl>
                    </div>
                </div>

                <div className="two columns konakartRow">
                    {this.props.currency}{this.props.price}
                </div>
                <div className="two columns p_quantity konakartRow">
                    <select className="productQuantityList konakartQuantity" name={'products[' + this.props.index + '][quantity]'} key={'ISBNQuantity_' + this.props.index}
                            value={this.props.quantity} onChange={this.updateProduct}>
                        {this.quantityOptionValues('ISBNQuantity_' + this.props.index)}
                    </select>
                    <input type="hidden" className="productISBNList" name={'products[' + this.props.index + '][isbn]'}  key={'isbn_' + this.props.index}
                           value={this.props.isbn}/>
                </div>
                <div className="two columns remove_check konakartRow">
                    <input className="delete button red" type="button" value="Delete" key={'remove_' + this.props.index}
                           name={'remove_' + this.props.index}
                           onClick={this.deleteProductConfirmation}/>
                </div>
                <div className="one column konakartRow">
                    <b>{this.props.currency}{this.props.itemTotal.toLocaleString('en-US', {minimumFractionDigits: 2})}</b>
                </div>
            </div>
        );
    }
});