//////////////////////////////////////////////////////////////////////////
// Markup

// Funkcja przygotująca markup dla wszystkich produktów
function idmPrepareProductsMarkup(products, addToBasket){
    let markup = "";
    products.forEach((prod)=>{
        markup += idmPrepareSingleProductMarkup(prod, addToBasket);
    })
    return markup;
}

// funkcja przygotowująca markup dla wybranego produktu
function idmPrepareSingleProductMarkup(prod, addToBasket){
    const prodExchangedData = app_shop.fn?.idmGetOmnibusDetails({productData: prod});
    
    // pobranie labelek
    let labelHTMLMarkup = "";
    if(typeof prodExchangedData.activeLabel === "object") Object.entries(prodExchangedData.activeLabel).forEach(([key,value])=>{
      labelHTMLMarkup += value;
    })

    // markup pojedynczego produktu
    let singleMarkup = "";
    singleMarkup += `
    <div class="product hotspot__product swiper-slide d-flex flex-column ${prod.price.price[idmPriceType].value === 0 ? "--phone" : ""}" data-id="${prod.id}">
        <div class="product__yousave --hidden">
            <span class="product__yousave --label"></span>
            <span class="product__yousave --value"></span>
        </div>
        <a class="product__icon d-flex justify-content-center align-items-center" tabindex="-1" href="${prod.link}">
            ${idmPrepareHotspotImgMarkup(prod)}
            <strong class="label_icons">
                ${labelHTMLMarkup}
            </strong>
        </a>
        <div class="product__content_wrapper">
            <a class="product__name" tabindex="0" href="${prod.link}" title="${prod.name}">${prod.name}</a>
            <div class="product__prices mb-auto ${prodExchangedData?.classes?.add?.reduce((acc,val) => acc + " " + val,"")}">
                ${idmPrepareHotspotPriceMarkup(prod, prodExchangedData)}
            </div>
        </div>
        ${idmPrepareHotspotAddToBasketMarkup(prod, addToBasket)}
    </div>`;
    
    return singleMarkup;
}

// markup zdjęcia
function idmPrepareHotspotImgMarkup(prod){
    let markup = "";
    if(prod.iconSmallSecond !== undefined && prod.iconSecond !== undefined) markup +=`<picture>
    <source media="(min-width: 421px)" type="image/webp" srcset="${prod.icon}"/>
    <source media="(min-width: 421px)" type="image/jpeg" srcset="${prod.iconSecond}"/>
    <source media="(max-width: 420px)" type="image/webp" srcset="${prod.iconSmall}"/>
    <source media="(max-width: 420px)" type="image/jpeg" srcset="${prod.iconSmallSecond}"/>
    <img src="${prod.iconSecond}" loading="lazy" alt="${prod.name}">
    </picture>`;
    else if(prod?.iconSmall !== undefined) markup += `<picture>
    <source media="(min-width: 421px)" srcset="${prod.icon}"/>
    <source media="(max-width: 420px)" srcset="${prod.iconSmall}"/>
    <img src="${prod.iconSecond}" loading="lazy" alt="${prod.name}">
    </picture>`;
    else markup += `<img src="${prod.icon}" loading="lazy" alt="${prod.name}">`
    return markup;
}

// markup cen
function idmPrepareHotspotPriceMarkup(prod, prodExchangedData){
    const price = prod.price.price[idmPriceType];
    const unit = prod.unit;
    const pointsPrice = prod?.points;
    const convertedPrice = prod.price?.unitConvertedPrice?.[idmPriceType]?.formatted;
    
    return `
        <strong class="price --normal --main ${price.value === 0 ? "--hidden" : ""}">
            <span class="price__sub">${price.formatted}</span>
            <span class="price_sellby">
                <span class="price_sellby__sep">/</span>
                <span class="price_sellby__sellby" data-sellby="${unit?.sellBy}">${unit?.sellBy}</span>
                <span class="price_sellby__unit">${unit?.sellBy > 1 ? unit?.plural : unit?.singular}</span>
            </span>
            ${convertedPrice ? `<span class="price --convert">${convertedPrice}</span>` : ""}
        </strong>
        ${pointsPrice ? `<span class="price --points">${pointsPrice} pkt.</span>` : ""}
        ${price.value === 0 ? `<a class="price --phone" href="/contact.php" tabindex="-1" title="${idmHotspotTextObject["Kliknij, by przejść do formularza kontaktu"]}">${idmHotspotTextObject["Cena na telefon"]}</a>` : ""}
        ${prodExchangedData?.beforeRebate?.visible ? `<span class="price --before-rebate">${prodExchangedData?.beforeRebate?.html}</span>` : ""}
        ${prodExchangedData?.newPriceEffectiveUntil?.visible ? `<span class="price --new-price new_price">${prodExchangedData?.newPriceEffectiveUntil?.html}</span>` : ""}
        ${prodExchangedData?.omnibus?.visible ? `<span class="price --omnibus omnibus_price">${prodExchangedData?.omnibus?.html}</span>` : ""}
        ${prodExchangedData?.max?.visible ? `<span class="price --max">${prodExchangedData?.max?.html}</span>` : ""}
    `;
}

// markup dodawania do koszyka
function idmPrepareHotspotAddToBasketMarkup(prod, addToBasket){
    let markup = "";
    if(!addToBasket && typeof addToBasket !== "undefined" || 
        (typeof addToBasket === "undefined" && typeof idmGeneralHotspotObjData === "object" && !idmGeneralHotspotObjData?.options?.addToBasket) ||
        !addToBasket && typeof idmGeneralHotspotObjData === "undefined") return markup;

    // link do produktu jak nie jest to zwykły produkt
    if(prod.type !== "product") markup = `<a class="btn --solid --medium add_to_basket__link" href="${prod.href}">Zobacz produkt</a>`;
    else if(addToBasket === "range" 
        || typeof addToBasket === "undefined" && typeof idmGeneralHotspotObjData === "object" && idmGeneralHotspotObjData?.options?.addToBasket === "range") // +-
        markup = `<form class="add_to_basket --range" action="/basketchange.php" type="post" onsubmit="idmHandleAddToBasket(event)">
                        <input name="mode" type="hidden" value="1">
                        <input name="product" type="hidden" value="${prod.id}">
                        <input name="size" type="hidden" value="${prod.sizes[0].id}">
                        <div class="idm-products-banner__qty"
                            data-sell-by="${prod.unit?.sellBy}"
                            data-precision="${prod.unit?.precision}"
                            data-max="${prod.sizes[0].amount === -1 ? 999999 : prod.sizes[0].amount}"
                            onclick="idmQuantityButtonClick(event)"
                            >
                          <button type="button" class="idm-products-banner__qty-decrease" aria-label="${idmHotspotTextObject["Zmniejsz ilość"]}">−</button>

                          <input type="number"
                                name="number"
                                class="idm-products-banner__qty-input"
                                value="${prod.unit?.sellBy}"
                                step="${prod.unit?.sellBy}"
                                min="${prod.unit?.sellBy}"
                                max="${prod.sizes[0].amount === -1 ? 999999 : prod.sizes[0].amount}" 
                                aria-label="${idmHotspotTextObject["Ilość"]}"
                                oninput="idmQuantityInputChange(event)"
                            >

                          <button type="button" class="idm-products-banner__qty-increase" aria-label="${idmHotspotTextObject["Zwiększ ilość"]}">+</button>
                        </div>

                        <button type="submit" class="btn --solid --medium add_to_basket__button" tabindex="0" data-success="${idmHotspotTextObject["Dodany"]}" data-error="${idmHotspotTextObject["Wystąpił błąd"]}" data-text="${idmHotspotTextObject["Do koszyka"]}">
                            <span>${idmHotspotTextObject["Do koszyka"]}</span>
                        </button>
                    </form>`;
    else // Zwykłe dodanie do koszyka
        markup = `
    <form class="add_to_basket" action="/basketchange.php" type="post" onsubmit="idmHandleAddToBasket(event)">
                        <input name="mode" type="hidden" value="1">
                        <input name="product" type="hidden" value="${prod.id}">
                        <input name="size" type="hidden" value="${prod.sizes[0].id}">
                        <input name="number" type="hidden" value="${prod.unit?.sellBy}">
                        <button type="submit" class="btn --solid --medium add_to_basket__button" tabindex="0" data-success="${idmHotspotTextObject["Dodany"]}" data-error="${idmHotspotTextObject["Wystąpił błąd"]}" data-text="${idmHotspotTextObject["Do koszyka"]}">
                            <span>${idmHotspotTextObject["Do koszyka"]}</span>
                        </button>
                    </form>`;
    return markup;
}