const smartypilotTraduzioni = {
    LabelMostraDiPiu: "Mostra di più",
    LabelMostraMeno: "Mostra meno",
    SearchNoResultLabel: (query) => `Nessun risultato per \"\u003cstrong\u003e{query}\u003c/strong\u003e\"`.replace("{query}", query),
    FiltroApplicatoLabel: (num) => `{num} filtro applicato`.replace("{num}", num),
    FiltriApplicatiLabel: (num) => `{num} filtri applicati`.replace("{num}", num),

};



class ArkosearchConfig {
    constructor({
        storeIndexGuid, 
        indexName,
        codiceLingua,
        codiceValuta,
        codiceValutaDefault,
        searchBoxId,
        itemsColumns = 5,
        itemsDistance = '3px',
        showAddToCartButton = false,
        addToCartIsIcon = false,
        addToCartButtonLabel = 'acquista',
        addToCartLink = '',
        addToCartOnClick = '',
        logoHeaderUrl = '',
        cmsUtilizzato = '',
        showOutOfStock = true,
        outOfStockLabel = 'non disponibile',
        orderOutOfStockAtEnd = false,
        pageSize = 20,
        attributiDinamici = '',
        scoreBoostRules = '',
        attributiFiltro = '',
        showCategoryFilter = false,
        categoryDisplayName = '',
        showBrandFilter = false,
        brandDisplayName = '',
        showPriceRangeFilter = false,
        showTextHighlight = false,
        showVoiceSearch = false,
        openSearchOnFocus = false,
        isValidPlan = true,
        isDisplayFullWidth = true,
        mostClickedProduct = ""
    }) {
        this.storeIndexGuid = storeIndexGuid;
        this.indexName = indexName;
        this.codiceLingua = codiceLingua;
        this.codiceValuta = codiceValuta;
        this.codiceValutaDefault = codiceValutaDefault;
        this.searchBoxId = searchBoxId;
        this.itemsColumns = itemsColumns;
        this.itemsDistance = itemsDistance;
        this.showAddToCartButton = showAddToCartButton;
        this.addToCartIsIcon = addToCartIsIcon;
        this.addToCartLink = addToCartLink;
        this.addToCartOnClick = addToCartOnClick;
        this.addToCartButtonLabel = addToCartButtonLabel;
        this.logoHeaderUrl = logoHeaderUrl;
        this.cmsUtilizzato = cmsUtilizzato;
        this.showOutOfStock = showOutOfStock;
        this.outOfStockLabel = outOfStockLabel;
        this.orderOutOfStockAtEnd = orderOutOfStockAtEnd;
        this.attributiDinamici = attributiDinamici;
        this.scoreBoostRules = scoreBoostRules;
        this.pageSize = pageSize;
        this.attributiFiltro = attributiFiltro;
        this.showCategoryFilter = showCategoryFilter;
        this.categoryDisplayName = categoryDisplayName;
        this.showBrandFilter = showBrandFilter;
        this.brandDisplayName = brandDisplayName;
        this.showPriceRangeFilter = showPriceRangeFilter;
        this.showTextHighlight = showTextHighlight;
        this.showVoiceSearch = showVoiceSearch;
        this.openSearchOnFocus = openSearchOnFocus;
        this.isValidPlan = isValidPlan;
        this.isDisplayFullWidth = isDisplayFullWidth;
        this.mostClickedProduct = mostClickedProduct;
    }
}


const configArkoSearch = new ArkosearchConfig({
    storeIndexGuid: '62cbf1ec-0199-4260-97f9-302a88768bec',
    indexName: 'horeca.etilika.it_it_eur_products',
    codiceLingua: 'IT',
    codiceValuta: 'EUR',
    codiceValutaDefault: 'EUR',
    searchBoxId: 'q',
    showAddToCartButton: true,
    addToCartIsIcon: true,
    addToCartButtonLabel: 'Aggiungi',
    addToCartLink: '',
    addToCartOnClick: '',
    logoHeaderUrl: 'https://horeca.etilika.it/images/thumbs/0004132_logo-etilika-horeca-top.png',
    cmsUtilizzato: 'nopcommerce',
    showOutOfStock: true,
    outOfStockLabel: 'non disponibile',
    orderOutOfStockAtEnd: true,
    pageSize: 20,
    attributiDinamici: '[{"SystemName":"attr_uvaggio","DisplayName":"Uvaggio","IsActiveForFilters":true,"Ordinamento":0},{"SystemName":"attr_tipologia","DisplayName":"Tipologia","IsActiveForFilters":true,"Ordinamento":0},{"SystemName":"attr_annata","DisplayName":"Annata","IsActiveForFilters":true,"Ordinamento":0},{"SystemName":"attr_alcol","DisplayName":"Alcol","IsActiveForFilters":true,"Ordinamento":0},{"SystemName":"attr_regione","DisplayName":"Regione","IsActiveForFilters":true,"Ordinamento":0},{"SystemName":"attr_formato","DisplayName":"Formato","IsActiveForFilters":true,"Ordinamento":0}]',
    scoreBoostRules: '[]',
    attributiFiltro: {},
    showCategoryFilter: false,
    categoryDisplayName: 'Categoria',
    showBrandFilter: true,
    brandDisplayName: 'Cantina',
    showPriceRangeFilter: true,
    showTextHighlight: true,
    showVoiceSearch: true,
    openSearchOnFocus: true,
    isValidPlan: true,
    isDisplayFullWidth: true,
    mostClickedProduct: '16383,16490,16321,10087,14532,15774'

});

const urlArkoSearchTemplateHtml = 'https://admin.smartypilot.ai/smartypilotscript/initscript?handler=MainTemplate&id=13&guidStoreIndex=62cbf1ec-0199-4260-97f9-302a88768bec&currency=EUR';
const urlArkoSearchCss = 'https://admin.smartypilot.ai/arkosearch-lib/arkosearch-modern.min.css?cb=30239';
const urlSmartyPilotFunctions = 'https://admin.smartypilot.ai/arkosearch-lib/smartypilot-functions.min.js?cb=30239';
const urlSmartyPilotColorCss = 'https://admin.smartypilot.ai/SmartyPilotScript/ColorCss';

const urlArkoSearchStatAction = 'https://admin.smartypilot.ai/SmartyPilotScript/index?handler=LogProductAction';
const urlArkoSearchStatSearch = 'https://admin.smartypilot.ai/SmartyPilotScript/index?handler=LogSearch';
const urlArkoSearchSearch = 'https://admin.smartypilot.ai/SmartyPilotScript/index?handler=Search';
const urlArkoSearchGetFilters = 'https://admin.smartypilot.ai/SmartyPilotScript/index?handler=GetFilters';
const urlArkoSearchSuggestions = 'https://admin.smartypilot.ai/SmartyPilotScript/index?handler=GetSuggestions';
const urlArkoSearchBanner = 'https://admin.smartypilot.ai/SmartyPilotScript/index?handler=Banner';


const internalSearchBoxId = "txtArkoSearch";
const divArkoSearchContainer = document.createElement('div');

document.addEventListener("DOMContentLoaded", function () {

    // Create and insert the container div before body close
    divArkoSearchContainer.id = 'arkosearch-container';
    document.body.appendChild(divArkoSearchContainer);

    if (configArkoSearch && configArkoSearch.isValidPlan) {

        // Load Smartypilot main HTML template
        fetch(urlArkoSearchTemplateHtml)
            .then(response => response.text())
            .then(html => {
                // Load SmartyPilot Js functions
                var script = document.createElement('script');
                script.src = urlSmartyPilotFunctions;
                script.type = 'text/javascript';
                script.onload = function() {
                    // Call injectWidgetHTML only after the script is loaded
                    injectWidgetHTML(html);

                    // Esegui altre funzioni che richiedono lo script smartypilot-functions.js
                    initializeSearchFromURL(); // Esegui la funzione di inizializzazione se necessario

                    // Inizializza gli eventi per l'ordinamento
                    setOrdinamentoEventListner();

                    // Inizializza il voice Search
                    smartypilot_InitializeVoiceSeaerch();
                };
                document.head.appendChild(script);
            })
            .catch(error => console.error('Error loading widget HTML:', error));

        // Carica i fonts
        loadFont();
    
        // Load CSS Smartypilot and custom styles
        loadCSS(urlArkoSearchCss);
        loadCSS(urlSmartyPilotColorCss + "?storeIndexGuid=" + configArkoSearch.storeIndexGuid);
   


                // Crea un elemento style
                var style = document.createElement('style');

                // Aggiungi gli stili in linea all'elemento style
                style.textContent = `.smartypilot-highlight {
    background-color: #f078001f;
    border: 1px solid #f078004d;
}
ul.smp-label-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 5px;
    top: 6px;
}
ul.smp-label-list li.smp-label.smp-alcol-free {
    background-color: #4e9604 !important;
    text-transform: uppercase;
    font-size: 11px !important;
    border: none;
    color: #fff;
}
ul.smp-label-list li.smp-label {
    background-color: #f1f1f1;
    border: 1px solid #e0dede;
    border-radius: 5px;
    padding: 1px 5px;
    color: #5a5a5a;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
    width: fit-content;
}
ul.smp-badge-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    right: 5px;
    top: 6px;
}
ul.smp-badge-list li.smp-badge {
    margin-top: 0px;
}
ul.smp-badge-list li.smp-badge img {
    width: 30px;
    height: auto;
    border: 1px solid #d4d4d4;
    border-radius: 100%;
}
.ark-item-img {
    height: auto;
    max-height: 130%;
}
.smp-with-icon .ark-item-button {
    padding: 3px 10px 3px 10px;
    background-color: #e9e9e9;
    border: 1px solid #c8c8c8;
}`;

                // Aggiungi l'elemento style all'head del documento
                document.head.appendChild(style);
            

    } else if (!configArkoSearch) {
        console.error('Smartypilot configuration not found.');
    } else {
        console.log('Smartypilot plan is not active!');
    }

});


function loadCSS(url) {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    document.head.appendChild(link);  
}

function loadFont() {
    var preconnect1 = document.createElement('link');
    preconnect1.rel = 'preconnect';
    preconnect1.href = 'https://fonts.googleapis.com';
    document.head.appendChild(preconnect1);

    var preconnect2 = document.createElement('link');
    preconnect2.rel = 'preconnect';
    preconnect2.href = 'https://fonts.gstatic.com';
    preconnect2.crossOrigin = 'anonymous';
    document.head.appendChild(preconnect2);

    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap';
    document.head.appendChild(link);
}

function createSmartyPilotHtmlBox(item, currentPage, configArkoSearch, showLabelSalePrice, formattedPriceNoReductions, formattedPriceWithReductions) {
        
    var simboloValuta = smartypilot_getCurrencySymbol(configArkoSearch.codiceValuta);
return `<a href="${item.productUrl}" class="arko-link-product" data-product-id="${item.id}" data-page="${currentPage}">
    <figure>
        ${item.quantity === 0 && configArkoSearch.showOutOfStock ? `
        <div class="ark-item-outofstock">${configArkoSearch.outOfStockLabel}</div>` : ''}
        <img src="${item.imageMainUrl}" loading="lazy" class="ark-item-img">
        <ul class="smp-label-list">
          	${item.attributi.attr_annata != "" && item.attributi.attr_annata != "n/v" ? '<li class="smp-label">' + item.attributi.attr_annata.trim() + '</li>' : ''}
			${item.attributi.attr_alcol != "" && item.attributi.attr_spectop_alcol != "0%" ? '<li class="smp-label">' + item.attributi.attr_alcol.trim() + '</li>' : ''}
			${item.attributi.attr_alcol == "0%" ? '<li class="smp-label smp-alcol-free">' + "alcohol free" + '</li>' : ''}
			${item.attributi.attr_formato != "" ? '<li class="smp-label">' + item.attributi.attr_formato.trim() + '</li>' : ''}
        </ul>
    </figure>
</a>
<div class="ark-item-body">
    <h5 class="ark-title">
        <a href="${item.productUrl}" class="arko-link-product" data-product-id="${item.id}" data-page="${currentPage}">${item.name}</a>
    </h5>
    <div class="ark-item-prices ${configArkoSearch.showAddToCartButton && configArkoSearch.addToCartIsIcon ? 'smp-with-icon' : ''}">
        <div class="ark-prices">
            ${showLabelSalePrice ? `<span class="ark-item-old-price">${formattedPriceNoReductions} ${simboloValuta}</span>` : ''}
            <span class="ark-item-price">${formattedPriceWithReductions} ${simboloValuta}</span>
        </div>
        ${configArkoSearch.showAddToCartButton && item.quantity > 0 && !item.hasCombinations ?
        `<a class="ark-item-button arksearch-btnAddToCart" data-productid="${item.id}" data-quantity="${item.minQuantity}" data-page="${currentPage}" title="${configArkoSearch.addToCartButtonLabel}">
            ${configArkoSearch.addToCartIsIcon ? '<img src="https://img.smartypilot.ai/img/smartypilot-add-to-cart-icon-light-black.png">' : configArkoSearch.addToCartButtonLabel}
        </a>` :
        configArkoSearch.showAddToCartButton && item.hasCombinations ?
        `<a href="${item.productUrl}" class="ark-item-button" data-productid="${item.id}" data-page="${currentPage}">
            Visualizza
        </a>` : ''
        }
    </div>
</div>`;}