class ArkosearchConfig {
    constructor({
        storeIndexGuid, 
        indexName,
        codiceLingua,
        codiceValuta,
        searchBoxId,
        itemsColumns = 5,
        itemsDistance = '3px',
        showAddToCartButton = false,
        addToCartButtonLabel = 'acquista',
        addToCartLink = '',
        addToCartOnClick = '',
        logoHeaderUrl = '',
        cmsUtilizzato = '',
        showOutOfStock = true,
        outOfStockLabel = 'non disponibile',
        orderOutOfStockAtEnd = false,
        pageSize = 20,
        attributiDinamici = '',
        scoreBoostRules = '',
        attributiFiltro = '',
        showCategoryFilter = false,
        showBrandFilter = false,
        showPriceRangeFilter = false,
        showTextHighlight = false,
        showVoiceSearch = false,
        openSearchOnFocus = false,
        isValidPlan = true,
        isDisplayFullWidth = true
    }) {
        this.storeIndexGuid = storeIndexGuid;
        this.indexName = indexName;
        this.codiceLingua = codiceLingua;
        this.codiceValuta = codiceValuta;
        this.searchBoxId = searchBoxId;
        this.itemsColumns = itemsColumns;
        this.itemsDistance = itemsDistance;
        this.showAddToCartButton = showAddToCartButton;
        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.showBrandFilter = showBrandFilter;
        this.showPriceRangeFilter = showPriceRangeFilter;
        this.showTextHighlight = showTextHighlight;
        this.showVoiceSearch = showVoiceSearch;
        this.openSearchOnFocus = openSearchOnFocus;
        this.isValidPlan = isValidPlan;
        this.isDisplayFullWidth = isDisplayFullWidth;
    }
}


const configArkoSearch = new ArkosearchConfig({
    storeIndexGuid: 'fd829b42-07b2-433f-8d94-170956e43964',
    indexName: 'affiliati3ilviziettosexyshopit_it_eur_products',
    codiceLingua: 'IT',
    codiceValuta: 'EUR',
    searchBoxId: 's',
    showAddToCartButton: true,
    addToCartButtonLabel: 'Aggiungi',
    addToCartLink: 'https://affiliati3.ilviziettosexyshop.it/carrello',
    addToCartOnClick: '',
    logoHeaderUrl: 'https://affiliati3.ilviziettosexyshop.it/img/affiliati-2-il-vizietto-sexy-shop-logo-1554926641.jpg',
    cmsUtilizzato: 'prestashop',
    showOutOfStock: true,
    outOfStockLabel: 'terminato',
    orderOutOfStockAtEnd: false,
    pageSize: 20,
    attributiDinamici: '[]',
    scoreBoostRules: '[]',
    attributiFiltro: {},
    showCategoryFilter: false,
    showBrandFilter: true,
    showPriceRangeFilter: true,
    showTextHighlight: false,
    showVoiceSearch: false,
    openSearchOnFocus: false,
    isValidPlan: true,
    isDisplayFullWidth: true
});

const urlArkoSearchTemplateHtml = 'https://admin.smartypilot.ai/arkosearch-lib/resources/arkosearch-modern-IT.html?cb=43831';
const urlArkoSearchCss = 'https://admin.smartypilot.ai/arkosearch-lib/arkosearch-modern.min.css?cb=43831';
const urlSmartyPilotFunctions = 'https://admin.smartypilot.ai/arkosearch-lib/smartypilot-functions.min.js?cb=43831';
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 = `.ark-item-outofstock {
	background-color: #f6f6f6b5;
}`;

                // 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) {
        
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">
    </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">
        <div class="ark-prices">
            ${showLabelSalePrice ? `<span class="ark-item-old-price">${formattedPriceNoReductions} €</span>` : ''}
            <span class="ark-item-price">${formattedPriceWithReductions} €</span>
        </div>
        ${configArkoSearch.showAddToCartButton && item.quantity > 0 && !item.hasCombinations ?
        `<a class="ark-item-button arksearch-btnAddToCart" data-productid="${item.id}" data-page="${currentPage}">
            ${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>`;}