const relatedProductList = document.querySelector('#relatedProducts');
const counter = document.querySelector('#counter');

async function startLoadData(){

  const queryString = window.location.search;
  const urlParams = new URLSearchParams(queryString);
  const category = urlParams.get('category') ?? null;

  var snap = storesRef;
  if(category != null){
    document.getElementById("title-page").innerHTML = category;
    snap = snap.where("category","==",category);
  } 

  var dataRef = await snap.orderBy("name","asc");

  dataRef.onSnapshot(snapshot => {
    console.log(snapshot.docs.length);
    if(snapshot.docs.length > 0) setupProduct(snapshot.docs);
    else setupNoResults();
  }, err => console.log(err.message));

  hideLoading();

}

const setupProduct = (data) => {
  if (data.length) {
      let html = '';
      var count = 0;

      data.forEach(doc => {
        const data = doc.data();
        count = count + 1;

        var description = "";
        if(data.description != undefined) description = data.description.toLowerCase();

        let li = `<div class="col-sm-4 col-md-4 mb-4">
          <div class="card h-100 hover-box-shadow">
            <div class="card-body p-0">
              <h6 class="text-center mb-2 title-text">${data.company}</h6>
              <p class="pr-4 pl-4 description-text mb-0">${description}</p>
              <div class="text-center mb-2"><img  src="../divider.png" style="height:2px"></div>
              
              <div class="pr-4 pl-4 pb-4 detail-text">
                <p> <img src="/assets/img/icons/interface/user.png">  ${data.name.toLowerCase()}</p>
                <p> <img src="/assets/img/icons/interface/smartphone.png"> <a style="color:#555a64!important;font-weight:600" href="tel:${data.phone}">${data.phone}</a> </p>
                <p> <img src="/assets/img/icons/interface/marker.png"> Piso ${data.floor} Tda. ${data.store}</p>
              </div>
            </div>
          </div>
        </div>`;
        html += li;
      });
      counter.innerHTML = `Se muestran ${count} resultados`;
      relatedProductList.innerHTML = html;
    } else {
      relatedProductList.innerHTML = ``;
    }
}


const setupNoResults = () => {
  counter.innerHTML = "";
  relatedProductList.innerHTML = `<div class="text-center">No hay resultados</div>`;
}