/*!
 * Crafted with ❤ by Salla
 */
import { r as registerInstance, h, H as Host, a as getElement } from './index-Cb4NFvMH.js';

const sallaPaymentsCss = ":host{display:block}";

const SallaPayments = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Array of the payments/items that are not supported, ex: ["sbc", "made-in-ksa", "cod", "mada", ""].
         */
        this.exclude = [];
    }
    componentWillLoad() {
        return salla.onReady()
            .then(() => {
            if (typeof this.exclude === 'string') {
                try {
                    this.exclude = JSON.parse(this.exclude);
                }
                catch (error) {
                    salla.logger.error('salla-payments:: failed to parse the exclude props!', this.exclude);
                    this.exclude = [];
                }
            }
            this.paymentSlot = this.host.querySelector('[slot="payment"]')?.innerHTML || `<li class="s-payments-list-item"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" alt="{payment}" /></li>`;
            this.sbcSlot = this.host.querySelector('[slot="sbc"]')?.innerHTML || `<li class="s-payments-list-item"><a target="_blank" href="{link}"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" class="s-payments-sbc-image" alt="SBC" /></a></li>`;
            this.codSlot = this.host.querySelector('[slot="cod"]')?.innerHTML || `<li class="s-payments-list-item"><img width="100%" height="100%" decoding="async" loading="lazy" src="{image}" alt="COD" /></li>`;
            this.payments = salla.config.get('store.settings.payments');
        });
    }
    render() {
        const madeInKSA = !this.exclude.includes('made-in-ksa') && salla.config.get('store.settings.made_in_ksa');
        const sbcId = this.exclude.includes('sbc') ? null : salla.config.get('store.settings.certificate.id');
        return (h(Host, { key: '94af8ddf97dca63ba7c1a19f65a1d872b8d565c6', class: "s-payments-list-wrap" }, h("ul", { key: '8e1425d89a60290b92042f82edbd2c0505da2904', class: "s-payments-list" }, madeInKSA && h("li", { key: '4ca6642fc2ef1cf1505b37127cf93cf48805e454', class: "s-payments-list-item" }, h("img", { key: 'f704728b2fade2d27f2109d47bc7e7381f3efe8b', width: "100%", height: "100%", decoding: "async", loading: "lazy", src: salla.url.cdn(`images/made-in-ksa.svg`, 58, 58), alt: "made in KSA certified" })), this.payments.map((payment) => (payment == "cod" ?
            h("div", { id: "cod-slot", innerHTML: this.codSlot
                    .replace(/\{image\}/g, salla.url.cdn(`images/payment/cod_mini.png`, 58, 58)) }) :
            h("div", { id: "payment-slot", innerHTML: this.paymentSlot
                    .replace(/\{image\}/g, salla.url.cdn(`images/payment/${payment}_mini.png`, 58, 58))
                    .replace(/\{payment\}/g, payment) }))), sbcId && h("div", { key: '5071bb1e003ff36b445fd15948b7612f6a1ecde4', id: "sbc-slot", innerHTML: this.sbcSlot
                .replace(/\{image\}/g, salla.url.cdn(`images/sbc.png`, 58, 58))
                .replace(/\{link\}/g, `https://eauthenticate.saudibusiness.gov.sa/certificate-details/${sbcId}`) }))));
    }
    componentDidRender() {
        //todo:: double check about the following workaround to reduce the dom length, it looks unusal
        this.host.querySelectorAll('#payment-slot').forEach(el => el.replaceWith(el.firstChild));
        this.host.querySelectorAll('#sbc-slot').forEach(el => el.replaceWith(el.firstChild));
        this.host.querySelectorAll('#cod-slot').forEach(el => el.replaceWith(el.firstChild));
        this.host.querySelector('[slot="payment"]')?.remove();
        this.host.querySelector('[slot="sbc"]')?.remove();
        this.host.querySelector('[slot="cod"]')?.remove();
    }
    get host() { return getElement(this); }
};
SallaPayments.style = sallaPaymentsCss;

export { SallaPayments as salla_payments };
