let enabledFilters=['category','brand'];
let traduzioni = {};

var VisualizzaRibbonSconto = false;

function initializeSearchContainer() {
    document.getElementById("osw-search-container").classList.add("active");
    document.getElementsByClassName("ais-SearchBox-input")[0].focus();
  }
  
  function closeOswSearch() {
    document.getElementById("osw-search-container").classList.remove("active");
	document.getElementsByClassName("ais-ClearRefinements-button")[0].click();
  }
  
  function cerca(text) {
    var searchBox = document.querySelector('.ais-SearchBox-input');
    if (searchBox) {
       searchBox.value = '';
       for (let i = 0; i < text.length; i++) {
          var inputEvent = new InputEvent('input', {
             bubbles: true
          });
          searchBox.value += text[i];
  
       }
       searchBox.dispatchEvent(inputEvent);
    } else {
       console.error('Elemento non trovato');
    }
  }
  
  // Funzione di attesa
  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
  
  var searchBodyTemplate = `
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css"/>
  <link rel="stylesheet" href="https://www.hunty.it/api/css/main.css"/> 
  <div id="osw-search-container" class="osw-search_container">
    <div class="osw-search_header">
     
       <button class="osw-search_close-search" onclick="closeOswSearch()"></button>
    </div>
    <div class="osw-search_searchbox" id="searchbox"></div>
    <div id="osw-search-result" class="osw-search_result-container">
       <div class="osw-search_filters">
       <div id="osw-actual-filters">
          <div id="current-refinements" class="osw-search_active-filters"></div>

        </div>
          <div id="clear-refinements" class="osw-search_clear-filters"></div>


       </div>
       <div class="osw-search_search-results">
             <div id="suggerimenti" class="osw-search_suggestion-results "> </div>
           <div id="brand-results"> </div>  
          <div id="category-results"> </div>
          <div class="osw-search_search-stat">
                      <div id="stats"></div>
                      <div id="hits-per-page"></div>
                      <div id="sort-by"></div>
          </div>
          <div class="osw-search_products">
                <div id="hits"></div>
          </div>
          <div  id="powewdby"> </div>
          <div class="osw-search_pagination">
                <div id="pagination"></div>
          </div>
       </div>
    </div>
  </div>`
  
  const {
    connectHits
  } = instantsearch.connectors;
  const renderHits = (renderOptions, isFirstRender) => {
    if (isFirstRender == false) {
       const category = renderOptions.results.categoryresults;
       const {
          hits,
          widgetParams
       } = renderOptions;
       if (category === undefined || category == null) {
        document.getElementById("category-results").innerHTML="";
          return;
       }
  
       var risultato;
       widgetParams.container.innerHTML = `
     <div class="ais-Hits-list">
       ${category.map(
           item => 
           widgetParams.templates.item.replaceAll('{{Image}}',item["Image"]).replaceAll('{{Name}}',item["Name"]).replaceAll('{{Link}}',item["Link"])
         )
         .join('')}
     </div>
   `;
    }
  };
  // 2. Create the custom widget
  const customHits = connectHits(
    renderHits
  );
  


//BRAND

const {
    connectBrandHits
} = instantsearch.connectors;
const renderBrandHits = (renderOptions, isFirstRender) => {
    if (isFirstRender == false) {
        const sugg = renderOptions.results.brandresults;
        const {
            hits,
            widgetParams
        } = renderOptions;
        if (sugg === undefined || sugg == null) {
            document.getElementById("brand-results").innerHTML = "";
            return;
        }
        widgetParams.container.innerHTML = `
   <div class="ais-Hits-list">
       ${sugg.map(
            item =>
                widgetParams.templates.item.replaceAll('{{Image}}', item["Image"]).replaceAll('{{Name}}', item["Name"]).replaceAll('{{Link}}', item["Link"])
        )
                .join('')}
     </div>
   `;
    }
};
const BrandHits = connectHits(
    renderBrandHits
);


//FINE BRAND




  //suggerimenti script
  const {
    connectSuggestionsHits
  } = instantsearch.connectors;
  const renderSuggestionsHits = (renderOptions, isFirstRender) => {
    if (isFirstRender == false) {
       const sugg = renderOptions.results.suggestionsresults;
       const {
          hits,
          widgetParams
       } = renderOptions;
       if (sugg === undefined || sugg == null) {
          document.getElementById("suggerimenti").innerHTML="";
          return;
       }
       widgetParams.container.innerHTML = `
   
     <div class="ais-Hits-list">
       ${sugg.map(
           item => 
           widgetParams.templates.item.replaceAll('{{Name}}',item["Name"])
         )
         .join('')}
     </div>
   `;
    }
  };
  const SuggestionsHits = connectHits(
    renderSuggestionsHits
  );
  //fine suggerimenti script
  
  
  function initiateSearch(apiKey, searchBoxIdentifier, languageId) {
    document.getElementById(searchBoxIdentifier).onclick = function () {
       initializeSearchContainer()
    };
    document.body.insertAdjacentHTML('beforeend', searchBodyTemplate);
  
    const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
       server: {
          apiKey: apiKey, // Be sure to use an API key that only allows searches, in production
          nodes: [{
             host: "www.hunty.it",
             port: "",
             protocol: "https",
          }, ],
       },
       additionalSearchParameters: {
          "ln": languageId,
       },
    });
    const searchClient = typesenseInstantsearchAdapter.searchClient;
    const search = instantsearch({
       searchClient,
       indexName: "products",
       routing: true,
       searchFunction: function (helper) {
          if (helper.state.query === '') {
             return;
          }
  
          helper.search();
       }
    });
  
    search.addWidgets([
       customHits({
          container: document.querySelector("#category-results"),
          escapeHTML: true,
          escapeHTML: true,
          templates: {
             item: `
         <a href={{Link}} class="ais-Hits-item osw-search_category-link">
               <div class="osw-search_category-detail">
                 <div class="osw-search_category-image">
                   <img loading="lazy" src="{{Image}}" alt="{{Name}} "/> 
                 </div>
                 <div class="osw-search_category-name" >
                   <h4> {{Name}}</h4>
                 </div>
               </div>
  
       </a>
         `,
          },
          cssClasses: {
             list: "osw-search_category-results-ontainer",
             item: "osw-search_category-result-box",
          },
       }),
  
       //SUGGERIMENTI
       SuggestionsHits({
          container: document.querySelector("#suggerimenti"),
          escapeHTML: true,
          escapeHTML: true,
          templates: {
             item: `
                  <a onclick="cerca('{{Name}}')" class="osw-search_suggestions-item">{{Name}}</a>
                `,
          },
       }),
  
       //FINE-SUGGERIMENTI
        //Brand
        BrandHits({
            container: document.querySelector("#brand-results"),
            escapeHTML: true,
            escapeHTML: true,
            templates: {
                itemx: `<div class="slide">
         <a href={{Link}} >
                   <img loading="lazy" src="{{Image}}" alt="{{Name}} "/> 
 
       </a></div>
         `,
                item: `
         <a href={{Link}} class="ais-Hits-item osw-search_brand-link">
               <div class="osw-search_brand-detail">
                 <div class="osw-search_brand-image">
                   <img loading="lazy" src="{{Image}}" alt="{{Name}} "/> 
                 </div>
                 <div class="osw-search_brand-name" >
                   <h4> {{Name}}</h4>
                 </div>
               </div>
  
       </a>
         `,
            },
            cssClasses: {
     //           list: "osw-search_brand-results-ontainer",
    //            item: "osw-search_brand-result-box",
            },
        }),
        //fine brand
       instantsearch.widgets.searchBox({
          container: "#searchbox",
          showSubmit: false,
          showReset: true,
          placeholder: "Cerca un prodotto... ",
          autofocus: false,
          cssClasses: {
             input: "osw-search_keyword-input",
             loadingIcon: "osw-stroke-primary",
          },
       }),
       instantsearch.widgets.pagination({
          container: "#pagination",
          cssClasses: {
             list: "osw-search_pagination",
             item: "osw-search_pagination-item",
             disabledItem: "osw-search_pagination-disabled",
             selectedItem: "osw-search_pagination-selected",
          },
       }),
	   //prodotti
       instantsearch.widgets.hits({
          container: "#hits",
          escapeHTML: true,
          templates: {
             item: `
		 <div id="ribbon" class="{{ribboncss}}"><span>{{ribbon}}</span></div>
             <span class="osw-search_availability {{test}}" style="z-index:9999">{{availability}}</span>
             <a href={{link}} class="osw-search_product-image-container">
                     <img src="{{image_link}}" alt="{{title}}" />
             </a>
             <a href={{link}} class="osw-search_product-description-link">
                 <p class="osw-search_product-description">
                     {{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}
                 </p>
             </a>
             <div class="osw-search_product-price-container">
                 <div class="osw_search-actual-price">\{{price}} <span class="osw_search-old-price">\{{prezzovecchio}}</span></div> 
             </div>
             <div class="osw-search_product-brand-container">
               <a href={{brand_link}}>    <strong> {{brand}}</strong></a>
             </div>
             <span class="osw-search_product-sku"> {{sku}}</span>
             `,
             empty: `<div>
                 <p>Non è stato trovato alcun prodotto per la ricerca <strong> {{ query }} Prova a cercare con meno parole o con termini diversi.</strong> </p>
              </div>`,
          },
 transformItems(items) {
             return items.map(entry => {
                entry.prezzovecchio = oldpricevalorized(entry['price'], entry['old-price-value'],  entry['price-withoutDiscount-value']),
				    entry.ribbon = discountribbon(entry['price'], entry['old-price-value'],  entry['price-withoutDiscount-value']), 
                entry.ribboncss = discountribbonclass(entry['price'], entry['old-price-value'],  entry['price-withoutDiscount-value']),
                entry.price = '€ ' + entry.price.toFixed(2), entry.test = dispoclass(entry.availability),
                entry.availability = dispo(entry.availability)
                return entry
             })
          },
          cssClasses: {
             list: "osw-search_product-box-container",
             item: "osw-search_product-box",
          },
       }),
       instantsearch.widgets.stats({
          container: "#stats",
          templates: {
             text: `
       {{#hasNoResults}}Non è stato trovato alcun prodotto per la ricerca {{/hasNoResults}}
       {{#hasOneResult}}1 prodotto{{/hasOneResult}}
       {{#hasManyResults}}{{#helpers.formatNumber}}{{nbHits}}{{/helpers.formatNumber}} prodotti{{/hasManyResults}}
       trovati in {{processingTimeMS}}ms
     `,
          },
          cssClasses: {
             text: "small",
          },
       }),
       instantsearch.widgets.clearRefinements({
  
          templates: {
             resetLabel: `Cancella Filtri`
          },
  
          container: "#clear-refinements",
       }),
  
  
       instantsearch.widgets.currentRefinements({
          container: "#current-refinements",
       }),
    ]);
  
    const {
       connectPoweredBy
    } = instantsearch.connectors;
  
    // Create the render function
    const renderPoweredBy = (renderOptions, isFirstRender) => {
       const {
          url,
          widgetParams
       } = renderOptions;
  
       widgetParams.container.innerHTML = `
     <a href="https://www.opso.it">Powered by Open Software</a>
   `;
    };
  
    // Create the custom widget
    const customPoweredBy = connectPoweredBy(
       renderPoweredBy
    );
  
    // Instantiate the custom widget
    search.addWidgets([
       customPoweredBy({
          container: document.querySelector('#powewdby'),
       })
    ]);

   

 //additional filters attribute
 if (enabledFilters != null && enabledFilters != undefined && enabledFilters != '') {
    enabledFilters.forEach(function (item, index) {
       var attributeHtml = `<h3 onclick="oswToggle(this)" class="osw-search_accordion active">Filtra per ` + getTranslation(traduzioni, item) + `</h5><div id="` + item + 
       `" class="osw-search_custom_attribute osw-search_panel"></div>`
       document.getElementById("osw-actual-filters").insertAdjacentHTML('beforeend', attributeHtml);
       search.addWidgets([
          instantsearch.widgets.refinementList({
             limit: 5,
             showMoreLimit: 50,
             container: "#" + item,
             attribute: item,
             searchable: true,
             searchablePlaceholder: "Filtra per " + getTranslation(traduzioni, item) ,
             showMore: true,
             templates: {
                showMoreText: `
       {{#isShowingMore}}
           Mostra meno
       {{/isShowingMore}}
       {{^isShowingMore}}
           Mostra altri
       {{/isShowingMore}}
     `,
             },
             sortBy: ["name:asc", "count:desc"],
          }),
       ]);

    });
 }
  
    search.start();
  }
  
  function dispo(testo) {
    if (testo.toLowerCase() === "in stock") {
       return 'DISPONIBILE';
    } else {
       return 'NON DISPONIBILE';
    }
  }
  
  function dispoclass(testo) {
    if (testo.toLowerCase() == "in stock") {
       return 'c-pill--success';
    } else {
       return 'c-pill--danger';
    }
  }


function oldpricevalorized(prezzo,vecchioprezzo,priceWithoutDiscount) {
	
     var maxmumPrice= Math.max(vecchioprezzo, priceWithoutDiscount)
    if (prezzo == vecchioprezzo || vecchioprezzo<=0 || vecchioprezzo==undefined ) {
       return '';
    } else {
       return '€ ' + vecchioprezzo;
    }
	
	
  }
  
  function discountribbonclass(prezzo,vecchioprezzo,priceWithoutDiscount) {
   var maxmumPrice= Math.max(vecchioprezzo, priceWithoutDiscount)
    if (prezzo == maxmumPrice ||  maxmumPrice<=0|| isNaN(maxmumPrice) || VisualizzaRibbonSconto == false) {
       return '';
    } else {
		return 'ribbon ribbon-top-right';
      // return '<div class="ribbon ribbon-top-right"><span>-'+calcPercentage(prezzo,vecchioprezzo)+'</span></div> ';
    }
  }
  
function discountribbon(prezzo,vecchioprezzo,priceWithoutDiscount) {
   var maxmumPrice= Math.max(vecchioprezzo, priceWithoutDiscount)
    if (prezzo == maxmumPrice || maxmumPrice<=0 || isNaN(maxmumPrice)|| VisualizzaRibbonSconto == false) {
       return '';
    } else {
		return '-'+calcPercentage(prezzo,maxmumPrice);
    }
  }
  
  function calcPercentage(x, y, fixed = 0) {
  const percent =  ((y - x) / y) * 100;
  if(!isNaN(percent)){
    return percent.toFixed(fixed) + '%';
  }else{
    return '';
  }
}
  
 function oswToggle(e) {
    e.classList.toggle("active");
     var panel = e.nextElementSibling;
     if (panel.style.display === "block" || panel.style.display==="") {
       panel.style.display = "none";
     } else {
       panel.style.display = "block";
     }
   };
 
function getTranslation(jsonObj, key) {
  if (jsonObj.hasOwnProperty(key)) {
    // Se la chiave esiste, restituisci il suo valore
    return jsonObj[key];
  } else {
    // Se la chiave non esiste, restituisci il nome della chiave mancante
    return `${key}`;
  }
}