/*!
 * Crafted with ❤ by Salla
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { P as PendingOrdersIcon } from './cart.js';
import { a as anime } from './anime.es.js';

const sallaCartSummaryCss = "";

const SallaCartSummary$1 = /*@__PURE__*/ proxyCustomElement(class SallaCartSummary extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.cartSummaryCount = salla.storage.get('cart.summary.count') || 0;
        this.cartSummaryTotal = salla.storage.get('cart.summary.total') || 0;
        this.cartLabel = salla.config.get('user.language_code') === 'ar' ? 'السلة' : 'Cart';
        salla.cart.event.onUpdated((response) => {
            this.cartSummaryCount = response.count || 0;
            this.cartSummaryTotal = response.total || 0;
        });
    }
    /**
     * Animate product Image to cart summary
     * @param image the image element to animate
     */
    async animateToCart(image) {
        document.querySelectorAll('.s-cart-thumb').forEach(el => el.remove());
        if (!image?.src) {
            salla.log('Failed to get the img element');
            return;
        }
        let cartBtn = this.host.querySelector('#s-cart-icon'), btnOffset = cartBtn.getBoundingClientRect(), btnTop = btnOffset.top + window.scrollY, btnLeft = btnOffset.left + window.scrollX;
        // get thumb position ---
        let position = image.getBoundingClientRect(), width = image.offsetWidth + 'px', height = image.offsetHeight + 'px', top = position.top, left = position.left;
        // create thumb img element ---
        let img = document.createElement("img");
        img.src = image.getAttribute('src');
        img.className = "s-cart-thumb";
        img.setAttribute("style", "object-fit:cover; width:" + width + '; height:' + height + '; top:' + top + 'px; left:' + left + 'px;z-index:99999999; ');
        document.body.append(img);
        let cartThumb = document.querySelector('.s-cart-thumb');
        cartBtn.classList.remove('animated', 'rubberBand');
        // start timeline ---
        let cartThumbAnime = new anime.timeline();
        cartThumbAnime.add({
            targets: cartThumb,
            width: [150, 30],
            height: [150, 30],
            top: [top, window.scrollY > 0 ? btnTop - window.scrollY - 40 : btnTop - 40],
            left: [left, btnLeft],
            borderRadius: ['20%', '50%'],
            easing: 'easeOutExpo',
            duration: 1200,
        }, '+=200')
            .add({
            targets: cartThumb,
            width: [30, 0],
            height: [30, 0],
            opacity: [1, 0],
            easing: 'easeOutExpo',
            top: [window.scrollY > 0 ? btnTop - window.scrollY - 40 : btnTop - 40, window.scrollY > 0 ? btnTop - window.scrollY + 10 : btnTop + 10],
            left: [btnLeft, btnLeft + 10],
        }, '-=500')
            .add({
            complete: function () {
                cartBtn.classList.add('animated', 'rubberBand');
                cartThumb.remove();
            },
        }, '-=1700');
    }
    /**
     * Some times it renderes with main domain, something like `https://salla.sa/cart`, because salla is not loaded,
     * here, we are sure it will not be rendred unless salla is ready
     */
    componentWillLoad() {
        return new Promise(resolve => salla.onReady(resolve));
    }
    /**
     * Compute cart href with scope + allocation parameters.
     * Uses storage (not config) so allocation_type/allocation_id set by bullet-delivery are included.
     */
    getCartLink() {
        let cartUrl = salla.url.get('cart');
        // Prefer storage over config: storage holds allocation_type/allocation_id, config only has type+id
        const scope = salla.storage.get('scope') || salla.config.get('store.scope');
        if (scope && scope.id) {
            try {
                const url = new URL(cartUrl);
                url.searchParams.set('scope', scope.id);
                if (scope.allocation_type)
                    url.searchParams.set('allocation_type', scope.allocation_type);
                if (scope.allocation_id)
                    url.searchParams.set('allocation_id', scope.allocation_id);
                return url.toString();
            }
            catch (e) {
                const delimiter = cartUrl.includes('?') ? '&' : '?';
                const params = new URLSearchParams();
                params.set('scope', String(scope.id));
                if (scope.allocation_type)
                    params.set('allocation_type', scope.allocation_type);
                if (scope.allocation_id)
                    params.set('allocation_id', scope.allocation_id);
                return `${cartUrl}${delimiter}${params.toString()}`;
            }
        }
        return cartUrl;
    }
    render() {
        return (h(Host, { key: '4d80eb7d5ea545740fd4c631b98297164e4afded' }, h("a", { key: 'f32a160c33514e98a35067eb8dc07aa15b7ddb9b', class: "s-cart-summary-wrapper", href: this.getCartLink() }, h("div", { key: 'b8ab102d86c3448d03403bade826d42c2fcee681', id: "s-cart-icon" }, h("slot", { key: '2dae30fcc74ef4c6e74d25f745aea0893cdb87c9', name: "icon" }, h("i", { key: 'df69ad3f3e7affe12ce26d6e16aa2e9e4670f2fc', class: "s-cart-summary-icon", innerHTML: PendingOrdersIcon }))), h("span", { key: '98927818c1f6b6e7138a8f818da96054c2d44b62', class: "s-cart-summary-count" }, salla.helpers.number(this.cartSummaryCount)), h("p", { key: '71a40df1d13608e4c9a988ee927ae5ebf1482635', class: "s-cart-summary-content" }, this.showCartLabel && h("span", { key: '9e8e2c66c3784ccebfc4bfba5ab2554a927b172c', class: "s-cart-summary-label" }, this.cartLabel), h("b", { key: 'bbc35cf2a4e793c3cf4d1a637740683569fd306d', class: "s-cart-summary-total", innerHTML: salla.money(this.cartSummaryTotal) })))));
    }
    get host() { return this; }
    static get style() { return sallaCartSummaryCss; }
}, [4, "salla-cart-summary", {
        "showCartLabel": [4, "show-cart-label"],
        "cartSummaryCount": [32],
        "cartSummaryTotal": [32],
        "cartLabel": [32],
        "animateToCart": [64]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["salla-cart-summary"];
    components.forEach(tagName => { switch (tagName) {
        case "salla-cart-summary":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SallaCartSummary$1);
            }
            break;
    } });
}
defineCustomElement$1();

const SallaCartSummary = SallaCartSummary$1;
const defineCustomElement = defineCustomElement$1;

export { SallaCartSummary, defineCustomElement };
