import React from "react";
export default class Order extends React.Component {
    constructor(props) {

        super(props)

        var products = [
            { name: "Motorhead glasses", price: 300, amount: 1 },
            { name: "Judaspriest glasses", price: 499, amount: 1 }
        ]

        this.state = { products: products }
        this.handleMinus = this.handleMinus.bind(this)

    }


    handleMinus(key) {
            var stateCopy = Object.assign({}, this.state.products);
            stateCopy.products[key].amount += 1;
            this.setState({products : stateCopy });
    }
    render() {
        return (
            <div className="order">
                {this.state.products.map(function (product, i) {
                    return <div className="order-product" key={i}>
                        <div className="order-product_img"><img src="./assets/img/pic-item.png" alt="" /></div>
                        <h3 className="order-product_name">{product.name}</h3>
                        <div className="order-product_amount">
                            <div className="amount">
                                <button id="minus" onClick={this.handleMinus = this.handleMinus.bind(this)}><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                    <g fill="none" fill-rule="evenodd">
                                        <circle cx="12" cy="12" r="11.5" stroke="#333" />
                                        <polygon fill="#000" fill-rule="nonzero" points="6.5 13 17.5 13 17.5 12 6.5 12" />
                                    </g>
                                </svg>

                                </button>
                                <p>{product.amount}</p>
                                <button className="plus"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                    <g fill="none" fill-rule="evenodd">
                                        <circle cx="12" cy="12" r="11.5" stroke="#333" />
                                        <polygon fill="#000" fill-rule="nonzero" points="6.5 13 17.5 13 17.5 12 6.5 12" />
                                        <polygon fill="#000" fill-rule="nonzero" points="11.5 7 11.5 18 12.5 18 12.5 7" />
                                    </g>
                                </svg>
                                </button>
                            </div>

                        </div>
                        <div className="order-product_price"><span className="l">Price</span><span className="right">${product.price}</span></div>
                    </div>
                }, this)
                }

                <div className="order-summary">
                    <h3>Order Summary</h3>
                    <div className="order-summary_summary">
                        <p>Subtotal <span className="price">$300</span></p>
                        <p>Shipping <span className="price">$20</span></p>
                        <hr />
                        <p>Total <span className="price">$320</span></p>
                    </div>
                </div>
            </div>

        )
    }
}