/*!
 * Crafted with ❤ by Salla
 */
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
        r = Reflect.decorate(decorators, target, key, desc);
    else
        for (var i = decorators.length - 1; i >= 0; i--)
            if (d = decorators[i])
                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { h } from "@stencil/core";
import { setTranslations } from "./translations";
import { closeModals, normalizeLoyaltyData } from "./functions";
import Star2 from "../../assets/svg/star2.svg";
import CancelIcon from "../../assets/svg/cancel.svg";
import SILayoutGrid from "../../assets/svg/layout-grid.svg";
import SIShipping from "../../assets/svg/shipping.svg";
import SIPercentage from "../../assets/svg/percentage.svg";
import SICart2 from "../../assets/svg/cart2.svg";
import PrizeImage from "../../assets/images/prize-image.svg";
import { TrackedPromise } from "../../Helpers/tracked-promise";
const sicons = {
    all: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SILayoutGrid }),
    free_shipping: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SIShipping }),
    coupon_discount: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SIPercentage }),
    free_product: h("span", { class: "s-loyalty-program-rewards-tab-icon", innerHTML: SICart2 }),
};
export class SallaLoyaltyPanel {
    constructor() {
        /**
         * prize to show in details or exchange modals
         */
        this.currentPrize = null;
        this.handleExchangeSucceeded = () => window.location.reload();
        this.handleResetSucceeded = () => window.location.reload();
    }
    componentWillLoad() {
        return salla.onReady()
            .then(() => salla.lang.onLoaded())
            .then(() => setTranslations())
            .then(() => {
            salla.event.on('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
            salla.event.on('loyalty::exchange-reset.succeeded', this.handleResetSucceeded);
            // Fetch points if user is logged in
            if (!salla.config.isGuest()) {
                this.points();
            }
        })
            .catch((error) => salla.logger.error(error));
    }
    disconnectedCallback() {
        salla.event.off('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
        salla.event.off('loyalty::exchange-reset.succeeded', this.handleResetSucceeded);
    }
    render() {
        const prizesGroups = this.program.data.prizes;
        const prizesCount = this.program.data.prizes_count;
        const customerPoints = (this.points.data ?? this.customerPoints ?? 0);
        if (this.prizeTitle && this.prizePoints) {
            return (h("div", { class: "s-loyalty-program-panel-exchange-wrapper" }, h("salla-list-tile", { class: "s-loyalty-program-after-exchange" }, h("div", { slot: "title", class: "s-loyalty-program-after-exchange-title" }, this.prizeTitle, " \u00A0 - \u00A0 ", this.prizePoints, " ", salla.lang.get('pages.loyalty_program.point')), h("div", { slot: "action", class: "s-loyalty-program-after-exchange-action" }, h("salla-button", { class: "s-loyalty-program-after-exchange-reset", shape: "icon", fill: 'outline', color: "danger", size: "small", onClick: () => salla.loyalty.reset() }, h("span", { innerHTML: CancelIcon }))))));
        }
        if (!customerPoints || customerPoints === 0) {
            return null;
        }
        return (h("div", { class: "" }, h("div", { class: "s-loyalty-program-panel-exchange-wrapper" }, h("salla-list-tile", { class: 's-loyalty-program-panel-widget' }, h("div", { slot: "icon", class: "s-loyalty-program-panel-widget-icon", innerHTML: Star2 }), h("div", { slot: "subtitle" }, salla.lang.get('pages.loyalty_program.cart_total_point_summary', { "balance": customerPoints }), h("salla-button", { shape: "link", color: "primary", onClick: () => {
                if (['error', 'idle'].includes(this.program.status)) {
                    this.program();
                }
                this.rewardsModal.open();
            } }, salla.lang.get('pages.loyalty_program.cart_point_exchange_now'))))), h("salla-modal", { id: "loyalty-rewards-modal", isLoading: this.program.status === 'pending', ref: modal => this.rewardsModal = modal, class: "s-loyalty-program-rewards-cart s-loyalty-program-modal", width: "lg", noPadding: true }, h("div", { slot: "loading" }, h("salla-loading", null)), this.program.status === 'success' ? h("div", { class: "s-loyalty-program-rewards-container-cart" }, h("div", { class: "s-loyalty-program-rewards-cart-header" }, h("div", { innerHTML: PrizeImage }), h("div", { class: "s-loyalty-program-panel-content" }, h("h1", null, this.program.data.prize_promotion_title), h("p", null, this.program.data.prize_promotion_description))), h("div", { class: {
                's-loyalty-program-slider-arrows': true,
                's-loyalty-program-tabs-hider': prizesGroups.length < 2 || prizesCount < 2,
            } }, h("salla-tabs", null, prizesGroups.map((group) => (h("salla-tab-header", { slot: "header", name: group.type }, sicons[group.type], h("span", null, group.title)))), prizesGroups.map((group) => (h("salla-tab-content", { slot: "content", name: group.type }, h("salla-slider", { id: group.type, type: "default", "slider-config": '{"loop":false,"slidesPerView":"auto","freeMode":true,"spaceBetween":12,"breakpoints":{"768":{"slidesPerView":3,"spaceBetween":24,"freeMode":false,"speed":300}}}' }, h("div", { slot: "items" }, group.items.map((prize) => h("salla-reward-card", { prize: prize, onAreaClick: () => {
                this.currentPrize = prize;
                closeModals(() => this.detailsModal.open());
            }, onActionClick: () => {
                this.currentPrize = prize;
                closeModals(() => this.detailsModal.open());
            } })))))))))) : ''), h("salla-modal", { ref: modal => this.detailsModal = modal, class: "s-loyalty-program-modal", width: "md", noPadding: true }, !this.currentPrize ? '' : h("salla-reward-details", { onActionClick: () => closeModals(() => this.exchangeModal.open()), prize: this.currentPrize })), h("salla-modal", { ref: modal => this.exchangeModal = modal, class: "s-loyalty-program-modal", width: "sm" }, !this.currentPrize ? '' : h("salla-reward-exchange", { prize: this.currentPrize }))));
    }
    static get is() { return "salla-loyalty-panel"; }
    static get originalStyleUrls() {
        return {
            "$": ["salla-loyalty-program.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["salla-loyalty-program.css"]
        };
    }
    static get properties() {
        return {
            "prizePoints": {
                "type": "any",
                "attribute": "prize-points",
                "mutable": true,
                "complexType": {
                    "original": "string | number",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The exchanged prize point"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "customerPoints": {
                "type": "number",
                "attribute": "customer-points",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Available customer points with which they can exchange."
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "prizeTitle": {
                "type": "string",
                "attribute": "prize-title",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The prize title"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            }
        };
    }
    static get states() {
        return {
            "currentPrize": {}
        };
    }
}
__decorate([
    TrackedPromise(async () => {
        const { data } = await salla.loyalty.getProgram();
        return normalizeLoyaltyData(data);
    }, { initialData: { prizes: [], prizes_count: 0 } })
], SallaLoyaltyPanel.prototype, "program", void 0);
__decorate([
    TrackedPromise(async () => {
        const { data } = await salla.loyalty.getPoints();
        return data.points;
    }, { initialData: null })
], SallaLoyaltyPanel.prototype, "points", void 0);
