import React from 'react';

export default class ProductCard extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            items: []
        };
    }
    componentDidMount() {
        fetch('http://localhost:8081/api/product/findAll')
            .then(response => response.json())
            .then(json => {
                this.setState({
                    isLoaded: true,
                    items: json.data,
                })
            })
    }
    addRow=(e)=>{
        var obj={
            id: e.target.dataset.id,
            price: e.target.dataset.price,
            name: e.target.dataset.name,
            img: e.target.dataset.img
        }
         
         alert(obj.id+" "+obj.name+" "+" $"+obj.price+" "+obj.img)
    }
    render() {
        var { isLoaded, items } = this.state;
        if (!isLoaded)
            return <p>Loading.......</p>
        else {
            return (
                <div className="row">
                    {items.map(items => (
                        <div className="col-md-3 col-sm-4 col-6" key={items.id}>
                            <figure className="card card-product">
                                <div className="img-wrap">
                                    <img src={"/img/" + items.img} alt="hello" />
                                    {/* <a className="btn-overlay" href="#id"><i class="fa fa-search-plus" ></i> Quick view</a> */}
                                </div>
                                <figcaption className="info-wrap">
                                    <h6 className="title text-dots"><a href="www.facebook.com">{items.name}</a></h6>
                                    <div className="action-wrap">
                                        {/* <button type="button" className="btn btn-primary btn-sm float-right"​> Order </button> */}
                                        <button type="button" className="btn btn-primary btn-sm float-right" 
                                        onClick={this.addRow} data-price={items.price} data-name={items.name} data-id={items.id} data-img={items.img}>Order </button>
                                        <div className="price-wrap h5">
                                            <span className="price-new">
                                                $ {items.price}
                                            </span>
                                        </div>
                                    </div>
                                </figcaption>
                            </figure>
                        </div>
                    ))}

                </div>

            )
        }
    }
}