/*!
 * Crafted with ❤ by Salla
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { P as PendingOrdersIcon } from './cart.js';
import { I as ImageIcon } from './image.js';
import { d as defineCustomElement$4 } from './salla-button2.js';
import { d as defineCustomElement$3 } from './salla-drawer2.js';
import { d as defineCustomElement$2 } from './salla-loading2.js';

var infoIcon = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>info</title>
<path d="M16 13.333c-0.737 0-1.333 0.596-1.333 1.333v9.333c0 0.737 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-9.333c0-0.737-0.596-1.333-1.333-1.333zM16 7.987c-0.737 0-1.333 0.596-1.333 1.333v0.013c0 0.737 0.596 1.327 1.333 1.327s1.333-0.603 1.333-1.34-0.596-1.333-1.333-1.333zM16 0c-8.823 0-16 7.177-16 16s7.177 16 16 16 16-7.177 16-16-7.177-16-16-16zM16 29.333c-7.352 0-13.333-5.981-13.333-13.333s5.981-13.333 13.333-13.333 13.333 5.981 13.333 13.333-5.981 13.333-13.333 13.333z"></path>
</svg>
`;

var moneyIcon = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>money-card</title>
<path d="M17.333 14.667h-2.667c-0.736 0-1.333-0.599-1.333-1.333s0.597-1.333 1.333-1.333h4c0.737 0 1.333-0.597 1.333-1.333s-0.596-1.333-1.333-1.333h-1.333v-1.333c0-0.736-0.596-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333c-2.205 0-4 1.795-4 4s1.795 4 4 4h2.667c0.736 0 1.333 0.597 1.333 1.333s-0.597 1.333-1.333 1.333h-4c-0.737 0-1.333 0.596-1.333 1.333s0.596 1.333 1.333 1.333h1.333v1.333c0 0.737 0.596 1.333 1.333 1.333s1.333-0.596 1.333-1.333v-1.333c2.205 0 4-1.795 4-4s-1.795-4-4-4zM28 2.667h-24c-2.205 0-4 1.795-4 4v18.667c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-18.667c0-2.205-1.795-4-4-4zM29.333 25.333c0 0.736-0.597 1.333-1.333 1.333h-24c-0.736 0-1.333-0.597-1.333-1.333v-18.667c0-0.735 0.597-1.333 1.333-1.333h24c0.736 0 1.333 0.599 1.333 1.333z"></path>
</svg>
`;

var checkCircleIcon = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>check-circle</title>
<path d="M19.557 11.26l-4.593 6.891-2.891-1.927c-0.616-0.411-1.441-0.243-1.849 0.369-0.409 0.612-0.244 1.441 0.369 1.849l4 2.667c0.228 0.152 0.485 0.224 0.739 0.224 0.431 0 0.855-0.208 1.111-0.593l5.333-8c0.409-0.612 0.244-1.441-0.369-1.849-0.616-0.411-1.443-0.243-1.849 0.369zM16 0c-8.823 0-16 7.177-16 16s7.177 16 16 16 16-7.177 16-16-7.177-16-16-16zM16 29.333c-7.352 0-13.333-5.981-13.333-13.333s5.981-13.333 13.333-13.333 13.333 5.981 13.333 13.333-5.981 13.333-13.333 13.333z"></path>
</svg>
`;

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

const SallaBottomAlert$1 = /*@__PURE__*/ proxyCustomElement(class SallaBottomAlert extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.storeId = salla.config.get('store.id');
        this.template = salla.config.get('store.template');
        this.loading = false;
        this.templateData = {};
        this.defaultMessage = salla.lang.getWithDefault('common.elements.store_is_available_for_purchase', 'هذا المتجر تطويري ومتاح للشراء من');
        this.defaultActionLabel = salla.lang.get('common.elements.know_more');
        this.storeFeatures = salla.lang.get('common.elements.store_features');
        this.storeDetails = salla.lang.get('common.elements.store_details');
        this.storePrice = salla.lang.getWithDefault('common.elements.store_price', 'سعر المتجر');
        this.storePriceDetails = salla.lang.getWithDefault('common.elements.store_price_details', 'السعر يشمل');
        this.theDeveloper = salla.lang.get('common.elements.the_developer');
        this.templateInformation = salla.lang.get('common.elements.template_information');
        this.buyTheTemplate = salla.lang.get('common.elements.buy_the_template');
        this.isRtl = salla.config.get('theme.is_rtl', true);
        this.storeName = salla.config.get('store.name');
        this.salla = salla.lang.getWithDefault('common.elements.salla', 'سلة');
        this.readyStores = salla.lang.getWithDefault('common.elements.ready_stores', 'المتاجر الجاهزة');
        this.moreDetailsLabel = salla.lang.getWithDefault('common.elements.more_details', 'تفاصيل أكثر');
        /**
         * Alert Type
         * */
        this.type = 'popup';
        salla.lang.onLoaded(() => {
            this.defaultMessage = salla.lang.get('common.elements.experimental_and_available_store');
            this.defaultActionLabel = salla.lang.get('common.elements.know_more');
            this.storeFeatures = salla.lang.get('common.elements.store_features');
            this.storeDetails = salla.lang.get('common.elements.store_details');
            this.templateInformation = salla.lang.get('common.elements.template_information');
            this.buyTheTemplate = salla.lang.get('common.elements.buy_the_template');
            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.more_details', 'تفاصيل أكثر');
            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.more_details', 'More Details');
            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.store_price', 'سعر المتجر');
            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.store_price', 'Store Price');
            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.the_developer', 'المطور');
            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.the_developer', 'the developer');
            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.store_price_details', 'السعر يشمل');
            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.store_price_details', 'Price Includes');
            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.salla', 'سلة');
            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.salla', 'Salla');
            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.store_is_available_for_purchase', 'هذا المتجر تطويري ومتاح للشراء من');
            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.store_is_available_for_purchase', 'This ready store is available for purchase from');
            salla.helpers.setNested(salla.lang.messages['ar.trans'], 'common.elements.ready_stores', 'المتاجر الجاهزة');
            salla.helpers.setNested(salla.lang.messages['en.trans'], 'common.elements.ready_stores', 'Ready Stores');
            setTimeout(() => {
                this.storePrice = salla.lang.get('common.elements.store_price');
                this.theDeveloper = salla.lang.get('common.elements.the_developer');
                this.storePriceDetails = salla.lang.getWithDefault('common.elements.store_price_details', 'السعر يشمل');
                this.salla = salla.lang.getWithDefault('common.elements.salla', 'سلة');
                this.defaultMessage = salla.lang.getWithDefault('common.elements.store_is_available_for_purchase', 'هذا المتجر تطويري ومتاح للشراء من');
                this.readyStores = salla.lang.getWithDefault('common.elements.ready_stores', 'المتاجر الجاهزة');
                // Initialize moreDetailsLabel after translations loaded
                this.moreDetailsLabel = salla.lang.getWithDefault('common.elements.more_details', 'More Details');
            }, 100);
        });
    }
    componentDidLoad() {
        // Fetch template data on mount if there's a template
        if (this.template &&
            typeof this.template === 'object' &&
            Object.keys(this.template).length > 0) {
            this.fetchTemplateData();
        }
    }
    open() {
        return this.drawer.open();
    }
    fetchTemplateData() {
        if (Object.keys(this.templateData).length) {
            return;
        }
        this.loading = true;
        return salla.api
            .request(`/store/template`, {}, 'get', { 'Store-Identifier': this.storeId })
            .then(res => {
            this.templateData = res.data;
            this.loading = false;
        })
            .catch(() => {
            this.loading = false;
        });
    }
    handleAction() {
        if (this.type === 'link') {
            window.location.href = this.actionUrl;
        }
        if (this.type === 'popup') {
            this.open();
        }
    }
    popup() {
        return (h("salla-drawer", { class: "s-bottom-alert-modal", ref: drawer => (this.drawer = drawer), "no-padding": true, onLoad: () => {
                if (this.drawer && Object.keys(this.templateData).length) {
                    this.drawer.setTitle(this.storeDetails + ' ' + this.storeName);
                }
            } }, Object.keys(this.templateData).length
            ? [
                h("div", { class: "s-bottom-alert-modal-inner s-scrollbar" }, h("div", { class: { 's-bottom-alert-modal-content': true } }, this.templateData?.features
                    ? [
                        h("div", { class: "s-bottom-alert-modal-content-title" }, h("i", { innerHTML: ImageIcon, class: "s-bottom-alert-modal-content-icon" }), h("span", null, this.storeFeatures)),
                        h("div", { class: "s-bottom-alert-modal-content-features", innerHTML: this.templateData?.features }),
                    ]
                    : ''), h("div", { class: {
                        's-bottom-alert-modal-content': true,
                        's-bottom-alert-modal-content-extra-padding': this.templateData?.price,
                    } }, this.templateData?.features
                    ? [
                        h("div", { class: "s-bottom-alert-modal-content-title" }, h("i", { innerHTML: moneyIcon, class: "s-bottom-alert-modal-content-icon" }), h("span", null, this.storePriceDetails)),
                        h("div", { class: "s-bottom-alert-modal-content-price-details" }, this.templateData?.price_details?.items.map(item => (h("div", { class: "s-bottom-alert-modal-content-price-details-item" }, h("i", { innerHTML: checkCircleIcon, class: "s-bottom-alert-modal-content-price-details-item-icon" }), h("span", { class: "s-bottom-alert-modal-content-price-details-item-name" }, item.name), h("span", { class: "s-bottom-alert-modal-content-price-details-item-price", innerHTML: salla.money(item.price) }))))),
                    ]
                    : ''), this.templateData?.link ? (h("div", { class: "s-bottom-alert-modal-content-footer" }, h("salla-button", { color: "primary", size: "medium", width: "wide", href: this.templateData?.link }, h("i", { innerHTML: PendingOrdersIcon }), this.buyTheTemplate))) : ('')),
            ]
            : ''));
    }
    render() {
        const hasTemplate = this.template && typeof this.template === 'object' && Object.keys(this.template).length > 0;
        return (h(Host, { key: 'fd021792f85aa7bb528909614dcb5c3b12d6d00a', class: `s-bottom-alert-wrapper ${hasTemplate ? 's-bottom-alert-wrapper-with-template' : ''}` }, hasTemplate && (h("div", { key: '7b7adc3efe5c3b50d468c280d8b5bedddb73bb4b', class: "s-bottom-alert-logo-section" }, h("img", { key: '1dbfdc8baefb71635772bdad548fb626bae7627b', src: "https://cdn.salla.network/images/logo/logo-light.svg", alt: "Salla", class: "s-bottom-alert-logo" }), h("span", { key: 'b4b372c13427f9753023ff642c38489d724e6820', class: "s-bottom-alert-logo-text" }, this.readyStores))), h("div", { key: '8cef155a60f7d3a5847da0b4ef090bb8fc8ae928', class: "s-bottom-alert-content" }, h("div", { key: '106ba8bcfcc56d3042d78bd102888b10bf70587d', class: "flex items-center gap-2" }, h("div", { key: '718695a0f5d376bcc056747074f006ceccf1f98b', class: "s-bottom-alert-icon" }, this.icon ? h("i", { class: this.icon }) : h("i", { innerHTML: infoIcon })), h("div", { key: '465bee0bb124482ec169925917fd15f3ce472fba', class: "s-bottom-alert-message" }, this.message ? (this.message) : hasTemplate ? (h("span", { class: "flex flex-wrap items-center gap-1" }, this.defaultMessage, h("span", { class: {
                's-bottom-alert-message-highlight': true,
            }, "aria-label": "Developer" }, this.salla), h("span", { innerHTML: salla.money(this.template.price) }))) : (this.defaultMessage))), this.type !== 'banner' && (h("div", { key: 'd860b7fba86b1273a0d257c3ec082d44f01340cc', class: hasTemplate ? 's-bottom-alert-actions-group' : 's-bottom-alert-action' }, hasTemplate ? (this.loading ? (h("salla-loading", { size: "20" })) : (h("div", { class: "s-bottom-alert-actions-group-container" }, h("a", { class: "s-bottom-alert-action-link", onClick: () => this.handleAction() }, this.actionLabel || this.moreDetailsLabel), this.templateData?.link ? (h("button", { type: "button", class: "s-bottom-alert-action-purchase-button", onClick: () => window.open(this.templateData?.link, '_blank') }, this.buyTheTemplate)) : null))) : (h("salla-button", { href: this.actionUrl, size: "medium", onClick: () => this.handleAction(), width: "normal" }, this.actionLabel || this.defaultActionLabel)))), this.type === 'popup' && this.popup())));
    }
    get host() { return this; }
    static get style() { return sallaBottomAlertCss; }
}, [0, "salla-bottom-alert", {
        "type": [513],
        "icon": [513],
        "message": [513],
        "actionUrl": [513, "action-url"],
        "actionLabel": [513, "action-label"],
        "storeId": [32],
        "template": [32],
        "loading": [32],
        "templateData": [32],
        "defaultMessage": [32],
        "defaultActionLabel": [32],
        "storeFeatures": [32],
        "storeDetails": [32],
        "storePrice": [32],
        "storePriceDetails": [32],
        "theDeveloper": [32],
        "templateInformation": [32],
        "buyTheTemplate": [32],
        "isRtl": [32],
        "storeName": [32],
        "salla": [32],
        "readyStores": [32],
        "moreDetailsLabel": [32]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["salla-bottom-alert", "salla-button", "salla-drawer", "salla-loading"];
    components.forEach(tagName => { switch (tagName) {
        case "salla-bottom-alert":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SallaBottomAlert$1);
            }
            break;
        case "salla-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "salla-drawer":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "salla-loading":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}
defineCustomElement$1();

const SallaBottomAlert = SallaBottomAlert$1;
const defineCustomElement = defineCustomElement$1;

export { SallaBottomAlert, defineCustomElement };
