export class ProductListComponent {

  constructor(productService) {
    this.productService = new ProductService();
    this.init();
  }

  function init() {
    this.productService.getProduct('storeId')
        .then({ function (data) {
        let storeId = data.data.pocSearch[0].id;
        // call productService function
        buildTemplate(storeId);
    })
    .catch(error => console.error('TODO: tratar erro ', error));
  }
  
  function buildTemplate(products) {
        const element = document.getElementById('product-list');

    // map of products
    let productItem = products.map(product => `
    <div class="product-item">
    <h1 class="product-title">${product.productVariants[0].title}</h1>
    <img class="product-image" src="${product.productVariants[0].imageUrl}" alt="${product.productVariants[0].title}">
    <p class="product-price">${product.productVariants[0].price}</p>
    <button class="less">-</button>
    <input type="text" class="item-amount" value="1"></input>
    <button class="more">+</button>
    </div>`).join('');

    // append list to html
    element.innerHTML = productItem;
  }

  
}