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

const urlArkoSearchTemplateHtml = 'https://admin.smartypilot.ai/arkosearch-lib/resources/arkosearch-modern.html?cb=76746';
const urlArkoSearchCss = 'https://admin.smartypilot.ai/arkosearch-lib/arkosearch-modern.css?cb=76746';
const urlSmartyPilotFunctions = 'https://admin.smartypilot.ai/arkosearch-lib/smartypilot-functions.js?cb=76746';
const urlSmartyPilotColorCss = 'https://admin.smartypilot.ai/SmartyPilotScript/ColorCss';

const urlArkoSearchStatClick = 'https://admin.smartypilot.ai/SmartyPilotScript/index?handler=LogProductClick';
const urlArkoSearchStatSearch = 'https://admin.smartypilot.ai/SmartyPilotScript/index?handler=LogSearch';
const urlArkoSearchSearch = 'https://admin.smartypilot.ai/SmartyPilotScript/index?handler=Search';
const urlArkoSearchSuggestions = 'https://admin.smartypilot.ai/SmartyPilotScript/index?handler=GetSuggestions';
const urlArkoSearchBanner = 'https://admin.smartypilot.ai/SmartyPilotScript/index?handler=Banner';

const configArkoSearch = new ArkosearchConfig({
    storeIndexGuid: 'f0cfa0a1-4b2d-48d8-9a74-63d777b24a4b',
    indexName: 'japanworld.it_it_eur_products',
    searchBoxId: 's',
    showAddToCartButton: true,
    addToCartButtonLabel: 'Aggiungi',
    addToCartLink: 'https://japanworld.it/it/carrello',
    addToCartOnClick: '',
    logoHeaderUrl: 'https://japanworld.it/img/logo-black.jpg',
    cmsUtilizzato: 'prestashop',
    showOutOfStock: true,
    outOfStockLabel: 'OUT OF STOCK',
    orderOutOfStockAtEnd: true,
    pageSize: 20,
    attributiDinamici: '[{"SystemName":"attr_preorder","IsActiveForFilters":false}]',
    attributiFiltro: {},
    showCategoryFilter: true,
    showBrandFilter: true,
    showPriceRangeFilter: false,
});

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) {

    // 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
            };
            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 = `span.ark-item-preordine {
    position: absolute;
    top: 30px;
    left: 0px;
    background-color: #ce1c45;
    padding: 5px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
}
span.ark-item-price {
    background-color: #545454;
}`;

            // Aggiungi l'elemento style all'head del documento
            document.head.appendChild(style);
            
} else {
    console.error('Smartypilot configuration not found.');
}

});


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.attributi.attr_preorder == 'SI' ? `<span class="ark-item-preordine">preordine</span>` : ''}
        ${item.quantity === 0 && configArkoSearch.showOutOfStock && item.attributi.attr_preorder != 'SI'? `
        <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}">
            ${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.attributi.attr_preorder == 'SI' ? 
                `<a class="ark-item-button arksearch-btnAddToCart" data-productid="${item.id}">
                    ${configArkoSearch.addToCartButtonLabel}
                </a>` : ''}
        </div>
</div>`;}