/*!
 * 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, nearestLowerMultiple, normalizeLoyaltyData } from "./functions";
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 SIUserAdd from "../../assets/svg/user-add.svg";
import SIGiftSharing from "../../assets/svg/gift-sharing.svg";
import SICartUpload from "../../assets/svg/cart-upload.svg";
import SIGift from "../../assets/svg/gift.svg";
import { TrackedPromise } from "../../Helpers/tracked-promise";
import anime from "animejs";
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 SallaLoyaltyProgram {
    constructor() {
        /**
         * prize to show in details or exchange modals
         */
        this.currentPrize = null;
        /**
         * collapsed state of points list
         */
        this.collapsed = true;
        this.animatedPoints = 0;
        this.handleExchangeSucceeded = () => {
            this.points();
            this.program();
        };
    }
    componentWillLoad() {
        return salla.onReady()
            .then(() => salla.lang.onLoaded())
            .then(() => setTranslations())
            .then(() => {
            this.program();
            this.points();
            salla.event.on('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
        })
            .catch((error) => salla.logger.error(error));
    }
    disconnectedCallback() {
        salla.event.off('loyalty::exchange.succeeded', this.handleExchangeSucceeded);
    }
    getOutlineItem(number, title, description) {
        const icons = {
            1: h("span", { innerHTML: SIUserAdd }),
            2: h("span", { innerHTML: SIGiftSharing }),
            3: h("span", { innerHTML: SICartUpload }),
        };
        return (h("li", { class: "s-loyalty-program-item" }, h("div", { class: "s-loyalty-program-content" }, h("span", { class: "s-loyalty-program-icon-container" }, h("span", { class: "s-loyalty-program-text-gradient" }, number), h("span", { class: "s-loyalty-program-icon" }, icons[number])), h("div", { class: "s-loyalty-program-title" }, title), h("div", { class: "s-loyalty-program-description" }, description))));
    }
    render() {
        if (this.program.status === 'error') {
            return h("p", null, salla.lang.get('common.errors.error_occured'));
        }
        const displayedPoints = this.program.data.points.slice(0, this.collapsed ? nearestLowerMultiple(this.program.data.points.length) : this.program.data.points.length);
        const prizesGroups = this.program.data.prizes;
        const prizesCount = this.program.data.prizes_count;
        return (h("div", { class: "s-loyalty-program-container" }, h("salla-loyalty-hero", { name: this.program.data.name, description: this.program.data.description, image: this.program.data.image }, salla.config.isUser()
            ? h("div", { slot: "crosspoint", class: "s-loyalty-program-profile-wrapper" }, h("div", { class: "s-loyalty-program-profile-container" }, h("div", { class: "s-loyalty-program-profile-points-section" }, h("h2", { class: "s-loyalty-program-profile-label" }, salla.lang.get('pages.loyalty_program.your_points')), h("p", { class: "s-loyalty-program-profile-points" }, h("span", { class: "s-loyalty-program-profile-points-value" }, !!this.animatedPoints ? this.animatedPoints : this.points.data), "\u00A0", salla.lang.get('pages.loyalty_program.point'))), h("div", { class: "s-loyalty-program-profile-icon" }, h("span", { innerHTML: SIGift }))))
            : h("button", { slot: "action", onClick: () => salla.event.dispatch('login::open'), class: {
                    's-loyalty-program-login-action': true,
                    's-loyalty-program-login-action-dark': !this.program.data.image,
                    's-loyalty-program-login-action-light': !!this.program.data.image,
                } }, salla.lang.get('blocks.header.login'))), h("div", { class: "s-loyalty-program-outline-section" }, h("section", { class: "s-loyalty-program-section" }, h("header", { class: "s-loyalty-program-header" }, h("h1", { class: "s-loyalty-program-main-title" }, salla.lang.get('pages.loyalty_program.how_to_start')), h("p", { class: "s-loyalty-program-subtitle" }, salla.lang.get('pages.loyalty_program.three_simple_steps'))), h("ol", { class: "s-loyalty-program-list" }, this.getOutlineItem(1, salla.lang.get('pages.loyalty_program.register'), salla.lang.get('pages.loyalty_program.create_account')), this.getOutlineItem(2, salla.lang.get('pages.loyalty_program.earn_points'), salla.lang.get('pages.loyalty_program.complete_tasks')), this.getOutlineItem(3, salla.lang.get('pages.loyalty_program.redeem_rewards'), salla.lang.get('pages.loyalty_program.enjoy_rewards'))))), h("div", { class: "s-loyalty-program-points-wrapper" }, h("section", { class: "s-loyalty-program-points-section" }, h("header", { class: "s-loyalty-program-points-header" }, h("h1", { class: "s-loyalty-program-points-title" }, this.program.data.promotion_title), h("p", { class: "s-loyalty-program-points-description" }, this.program.data.promotion_description)), h("div", { class: "s-loyalty-program-points-spacer" }), h("ul", { class: {
                's-loyalty-program-points-list-one': this.program.data.points.length === 1,
                's-loyalty-program-points-list-two': this.program.data.points.length === 2,
                's-loyalty-program-points-list-multi': this.program.data.points.length > 2,
            } }, displayedPoints.map(point => (h("li", null, h("salla-loyalty-point", { point: point }))))), h("div", { class: "s-loyalty-program-points-spacer" }), nearestLowerMultiple(this.program.data.points.length) !== this.program.data.points.length && h("button", { class: "s-loyalty-program-points-more-button", onClick: () => this.collapsed = !this.collapsed }, this.collapsed
            ? h("span", null, salla.lang.get('pages.loyalty_program.show_more'), "\u00A0\u00A0", h("span", { style: { fontSize: '1.2rem', fontWeight: '300' } }, "+"))
            : h("span", null, salla.lang.get('pages.loyalty_program.show_less'), "\u00A0\u00A0", h("span", { style: { fontSize: '1.2rem', fontWeight: '300' } }, "-"))))), this.program.status !== 'success' ? '' : h("div", { class: "s-loyalty-program-rewards-container s-loyalty-program-slider-arrows-edges" }, h("section", { class: {
                's-loyalty-program-tabs-hider': prizesGroups.length <= 2 || prizesCount <= 4,
            } }, h("h1", { class: "s-loyalty-program-rewards-heading-mobile" }, salla.lang.get('pages.loyalty_program.rewards')), h("salla-tabs", null, h("div", { slot: "header", class: "s-loyalty-program-rewards-tab-items" }, prizesGroups.map((group) => (h("salla-tab-header", { slot: "header", name: group.type }, sicons[group.type], h("span", null, group.title))))), h("h1", { slot: "header", class: "s-loyalty-program-rewards-heading-desktop" }, salla.lang.get('pages.loyalty_program.rewards')), 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":4,"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-program"; }
    static get originalStyleUrls() {
        return {
            "$": ["salla-loyalty-program.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["salla-loyalty-program.css"]
        };
    }
    static get states() {
        return {
            "currentPrize": {},
            "collapsed": {},
            "animatedPoints": {}
        };
    }
}
__decorate([
    TrackedPromise(async function () {
        const { data } = await salla.loyalty.getProgram();
        return normalizeLoyaltyData(data);
    }, { initialData: { points: [], prizes: [], prizes_count: 0 } })
], SallaLoyaltyProgram.prototype, "program", void 0);
__decorate([
    TrackedPromise(async function () {
        const { data } = await salla.loyalty.getPoints();
        anime({
            targets: { value: 0 },
            value: data.points ?? 0,
            round: 1,
            easing: 'easeOutQuad',
            duration: 2000,
            update: (anim) => {
                this.animatedPoints = anim.animations[0].currentValue;
            }
        });
        return data.points;
    })
], SallaLoyaltyProgram.prototype, "points", void 0);
