/*!
 * Crafted with ❤ by Salla
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$3 } from './salla-button2.js';
import { d as defineCustomElement$2 } from './salla-skeleton2.js';

const sallaBoughtTogetherCss = ":host{display:block}.s-bought-together-checkbox:checked~.s-bought-together-checkmark{background-color:var(--color-primary, #2ECC71);border-color:var(--color-primary, #2ECC71)}.s-bought-together-checkbox:checked~.s-bought-together-checkmark::after{content:\"\";display:block;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-2px}.s-bought-together-entry{display:block;background-color:#fff;padding:1.25rem;border-radius:0.375rem;margin-top:1.25rem;margin-bottom:1.25rem}.s-bought-together-header{margin-bottom:1rem}.s-bought-together-title{font-size:1.125rem;line-height:1.75rem;font-weight:700;margin-bottom:0.25rem;color:#111827}.s-bought-together-subtitle{font-size:0.875rem;line-height:1.25rem;color:#6b7280;margin:0}.s-bought-together-list{display:flex;flex-direction:column;margin-bottom:1rem}.s-bought-together-list>*+*{border-top:1px solid #f3f4f6}.s-bought-together-item{display:flex;align-items:center;gap:0.75rem;padding-top:0.75rem;padding-bottom:0.75rem;transition:opacity 200ms}.s-bought-together-item--unchecked{opacity:0.4}.s-bought-together-checkbox-label{position:relative;display:flex;align-items:center;cursor:pointer;flex-shrink:0}.s-bought-together-checkbox{position:absolute;opacity:0;width:0;height:0}.s-bought-together-checkmark{width:22px;height:22px;border:2px solid #d1d5db;border-radius:0.375rem;background-color:#fff;display:flex;align-items:center;justify-content:center;transition:all 150ms;flex-shrink:0}.s-bought-together-item-link{display:contents;color:inherit;text-decoration:none}.s-bought-together-item-img{width:3rem;height:3rem;object-fit:cover;border-radius:0.375rem;flex-shrink:0}.s-bought-together-item-name{flex:1;font-size:0.875rem;line-height:1.375}.s-bought-together-item-price{font-size:0.875rem;font-weight:600;white-space:nowrap;flex-shrink:0}.s-bought-together-btn{width:100%}.s-bought-together-skeleton{display:flex;flex-direction:column;gap:0.75rem}.s-bought-together-skeleton-header{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.5rem}.s-bought-together-skeleton-item{display:flex;align-items:center;gap:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem}.s-bought-together-skeleton-info{flex:1;display:flex;flex-direction:column;gap:0.25rem}";

// Read-only recommendations key confirmed safe for client-side use by the API team — no write access or sensitive scope.
const XSELL_API_KEY = 'VOL5WaZu2YROp0RplCZAr1RplhL9FFGQ';
const SallaBoughtTogether$1 = /*@__PURE__*/ proxyCustomElement(class SallaBoughtTogether extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        /**
         * Maximum number of recommendations to fetch. Max is 4.
         */
        this.limit = 3;
        this.recommendations = [];
        this.selectedIds = new Set();
        this.isLoading = true;
        this.canRender = true;
        this.isAdding = false;
        this.title = salla.lang.get('pages.products.bought_together_title');
        this.subtitle = salla.lang.get('pages.products.bought_together_subtitle');
        this.buyTogetherFor = salla.lang.get('pages.products.buy_together_for');
        this.resolvedProductId = 0;
        salla.lang.onLoaded(() => {
            this.title = salla.lang.get('pages.products.bought_together_title');
            this.subtitle = salla.lang.get('pages.products.bought_together_subtitle');
            this.buyTogetherFor = salla.lang.get('pages.products.buy_together_for');
        });
    }
    componentWillLoad() {
        salla.onReady()
            .then(() => {
            if (!salla.config.get('store.settings.product.bought_together')) {
                this.canRender = false;
                return;
            }
            const id = salla.config.get('page.id');
            if (!id) {
                this.canRender = false;
                return;
            }
            this.resolvedProductId = id;
            return salla.api.request('https://api.salla.dev/1/indexes/*/recommendations', {
                requests: [{
                        indexName: 'products',
                        model: 'xsell-v1',
                        priceThreshold: 2,
                        objectID: String(id),
                        maxRecommendations: this.limit,
                    }]
            }, 'post', { headers: { 'X-Algolia-Api-Key': XSELL_API_KEY, 'X-Query-Enrichment': 'false', 'X-source': 'store' } });
        })
            .then((response) => {
            if (!response)
                return;
            const hits = response?.results?.[0]?.hits ?? [];
            if (!hits.length) {
                this.canRender = false;
                return;
            }
            const ids = [String(this.resolvedProductId), ...hits.map(h => h.objectID)];
            return salla.product.fetch({ source: 'selected', source_value: ids });
        })
            .then((response) => {
            if (!response)
                return;
            const products = response?.data ?? [];
            if (!products.length) {
                this.canRender = false;
                return;
            }
            const mainProduct = products.find(p => String(p.id) === String(this.resolvedProductId));
            const rest = products.filter(p => String(p.id) !== String(this.resolvedProductId));
            if (!rest.length) {
                this.canRender = false;
                return;
            }
            this.recommendations = mainProduct ? [mainProduct, ...rest] : rest;
            this.selectedIds = new Set(this.recommendations.map((p) => p.id));
        })
            .catch(() => {
            this.canRender = false;
        })
            .finally(() => {
            this.isLoading = false;
        });
    }
    toggleProduct(id) {
        const next = new Set(this.selectedIds);
        next.has(id) ? next.delete(id) : next.add(id);
        this.selectedIds = next;
    }
    get totalPrice() {
        const total = this.recommendations
            .filter(p => this.selectedIds.has(p.id))
            // p.price is a plain float in the API response (e.g. 1150.58) — the TS type (any[]) is misleading.
            .reduce((sum, p) => sum + (p.price ?? 0), 0);
        return salla.money(total);
    }
    async addSelectedToCart() {
        if (this.isAdding || !this.selectedIds.size)
            return;
        this.isAdding = true;
        try {
            // Intentional: quickAdd is used for all items including the main product without options — business decision by product team.
            const results = await Promise.allSettled(Array.from(this.selectedIds).map(id => salla.cart.quickAdd(id)));
            if (results.some(r => r.status === 'rejected')) {
                salla.error(salla.lang.get('common.messages.error'));
            }
        }
        finally {
            this.isAdding = false;
        }
    }
    getSkeletonView() {
        return (h(Host, { class: "s-bought-together-entry" }, h("div", { class: "s-bought-together-skeleton" }, h("div", { class: "s-bought-together-skeleton-header" }, h("salla-skeleton", { height: "16px", width: "35%" }), h("salla-skeleton", { height: "10px", width: "60%" })), Array(4).fill(null).map((_, i) => (h("div", { key: i, class: "s-bought-together-skeleton-item" }, h("salla-skeleton", { height: "22px", width: "22px" }), h("salla-skeleton", { height: "48px", width: "48px" }), h("div", { class: "s-bought-together-skeleton-info" }, h("salla-skeleton", { height: "12px", width: "55%", style: { marginBottom: '3px' } }), h("salla-skeleton", { height: "10px", width: "25%" }))))), h("salla-skeleton", { height: "44px", width: "100%" }))));
    }
    render() {
        if (!this.canRender)
            return null;
        if (this.isLoading)
            return this.getSkeletonView();
        if (!this.recommendations.length)
            return null;
        return (h(Host, { class: "s-bought-together-entry" }, h("div", { class: "s-bought-together-header" }, h("h3", { class: "s-bought-together-title" }, this.title), h("p", { class: "s-bought-together-subtitle" }, this.subtitle)), h("div", { class: "s-bought-together-list" }, this.recommendations.map((product) => (h("div", { key: product.id, class: `s-bought-together-item${!this.selectedIds.has(product.id) ? ' s-bought-together-item--unchecked' : ''}` }, h("label", { class: "s-bought-together-checkbox-label" }, h("input", { type: "checkbox", class: "s-bought-together-checkbox", checked: this.selectedIds.has(product.id), onChange: () => this.toggleProduct(product.id) }), h("span", { class: "s-bought-together-checkmark" })), h("a", { class: "s-bought-together-item-link", href: product.url }, h("img", { class: "s-bought-together-item-img", src: product.image?.url || salla.url.cdn('images/s-empty.png'), alt: product.image?.alt || product.name, loading: "lazy", decoding: "async", onError: e => {
                e.currentTarget.onerror = null;
                e.currentTarget.src = salla.url.cdn('images/s-empty.png');
            } }), h("span", { class: "s-bought-together-item-name" }, product.name)), h("span", { class: "s-bought-together-item-price", innerHTML: salla.money(product.price) }))))), h("salla-button", { class: "s-bought-together-btn", disabled: !this.selectedIds.size || this.isAdding, loading: this.isAdding, onClick: () => this.addSelectedToCart() }, h("span", { innerHTML: `${this.buyTogetherFor} ${this.totalPrice}` }))));
    }
    static get style() { return sallaBoughtTogetherCss; }
}, [0, "salla-bought-together", {
        "limit": [2],
        "recommendations": [32],
        "selectedIds": [32],
        "isLoading": [32],
        "canRender": [32],
        "isAdding": [32],
        "title": [32],
        "subtitle": [32],
        "buyTogetherFor": [32]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["salla-bought-together", "salla-button", "salla-skeleton"];
    components.forEach(tagName => { switch (tagName) {
        case "salla-bought-together":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SallaBoughtTogether$1);
            }
            break;
        case "salla-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "salla-skeleton":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const SallaBoughtTogether = SallaBoughtTogether$1;
const defineCustomElement = defineCustomElement$1;

export { SallaBoughtTogether, defineCustomElement };
