/*!
 * Crafted with ❤ by Salla
 */
import { h } from "@stencil/core";
import { closeModals, formattedPointsJsx } from "./functions";
import SIGift from "../../assets/svg/gift.svg";
import SICart2 from "../../assets/svg/cart2.svg";
import SIStore from "../../assets/svg/store.svg";
import SIUserAdd from "../../assets/svg/user-add.svg";
import SIChatConversationAlt from "../../assets/svg/chat-conversation-alt.svg";
import SILink1 from "../../assets/svg/link1.svg";
import SIUser from "../../assets/svg/user.svg";
import SIMail from "../../assets/svg/mail.svg";
import SICalendar from "../../assets/svg/calendar.svg";
import SIiPhoneX from "../../assets/svg/iphone-x.svg";
import SILocation from "../../assets/svg/location.svg";
import SIMapLocation from "../../assets/svg/map-location.svg";
import SIShipping from "../../assets/svg/shipping.svg";
/**
 * Dashboard sicons:
 * share - sicon-share-alt
 * order from store - sicon-shopping-basket
 * rate order - sicon-chat-conversation-alt
 * order from app - sicon-iphone-x
 * first order - sicon-add-to-cart
 * pos - sicon-store
 * fill profile - sicon-user-add
 */
const sicons = {
    'FIRST_ORDER_STORE_FOR_UNIT': h("span", { innerHTML: SICart2 }),
    'FIRST_ORDER_STORE_FIX_AMOUNT': h("span", { innerHTML: SICart2 }),
    'ORDER_FROM_APP_FOR_UNIT': h("span", { innerHTML: SICart2 }),
    'ORDER_FROM_APP_FIX_AMOUNT': h("span", { innerHTML: SICart2 }),
    'CONDITION_RATING_SHIPPING_STORE': h("span", { innerHTML: SIStore }),
    'CONDITION_RATING_PRODUCT': h("span", { innerHTML: SIChatConversationAlt }),
    'CONDITION_RATING_SHIPPING_COMPANY': h("span", { innerHTML: SIShipping }),
    'CONDITION_COMPLETE_PERSONAL_INFORMATION_BIRTHDAY': h("span", { innerHTML: SICalendar }),
    'CONDITION_COMPLETE_PERSONAL_INFORMATION_EMAIL': h("span", { innerHTML: SIMail }),
    'CONDITION_COMPLETE_PERSONAL_INFORMATION_MOBILE': h("span", { innerHTML: SIiPhoneX }),
    'CONDITION_COMPLETE_PERSONAL_INFORMATION_GENDER': h("span", { innerHTML: SIUser }),
    'CONDITION_BUY_FROM_STORE_FOR_UNIT': h("span", { innerHTML: SICart2 }),
    'CONDITION_BUY_FROM_STORE_FIX_AMOUNT': h("span", { innerHTML: SICart2 }),
    'order_from_pos_1': h("span", { innerHTML: SIiPhoneX }),
    'order_from_pos_2': h("span", { innerHTML: SILocation }),
    'buy_from_pos_1': h("span", { innerHTML: SIMapLocation }),
    'buy_from_pos_2': h("span", { innerHTML: SIiPhoneX }),
    'CONDITION_BUY_FROM_POS_FOR_UNIT': h("span", { innerHTML: SIiPhoneX }),
    'CONDITION_BUY_FROM_POS_FIX_AMOUNT': h("span", { innerHTML: SIiPhoneX }),
    'affiliate_link_1': h("span", { innerHTML: SILink1 }),
    'affiliate_link_2': h("span", { innerHTML: SIUserAdd }),
    'affiliate_link_3': h("span", { innerHTML: SICart2 }),
    'CONDITION_AFFILIATE_LINK': h("span", { innerHTML: SILink1 }),
};
export class SallaLoyaltyPoint {
    async handleShareAction(e, point, successText) {
        const isDesktop = window.matchMedia('(min-width: 1024px)').matches;
        // only on mobile/tablet devices
        if ('share' in navigator && !isDesktop) {
            try {
                await navigator.share({
                    title: document.title,
                    url: point.url,
                });
                return;
            }
            catch (error) { }
        }
        const el = e.target;
        const oldTextContent = el.textContent;
        const temporaryTextContent = successText;
        // fallback to clipboard
        if ('clipboard' in navigator) {
            try {
                await navigator.clipboard.writeText(point.url);
                el.textContent = temporaryTextContent;
                setTimeout(() => {
                    el.textContent = oldTextContent;
                }, 5000);
                return;
            }
            catch (error) { }
        }
        // fallback to textarea
        const textarea = document.createElement('textarea');
        textarea.value = point.url;
        textarea.style.opacity = '0';
        this.host.appendChild(textarea);
        textarea.focus();
        textarea.select();
        try {
            const success = document.execCommand('copy');
            if (!success) {
                throw new Error('Failed to copy URL to clipboard');
            }
            el.textContent = temporaryTextContent;
            setTimeout(() => {
                el.textContent = oldTextContent;
            }, 5000);
        }
        catch (error) { }
        this.host.removeChild(textarea);
    }
    handleAction(e, point) {
        e.stopPropagation();
        if (point.is_completed) {
            e.preventDefault();
            return;
        }
        switch (point.type) {
            case 'profile':
            case 'rating': {
                if (!salla.config.isUser()) {
                    e.preventDefault();
                    closeModals(() => salla.event.dispatch('login::open'));
                    return;
                }
                return;
            }
            case 'share': {
                if (!salla.config.isUser()) {
                    e.preventDefault();
                    closeModals(() => salla.event.dispatch('login::open'));
                    return;
                }
                e.preventDefault();
                this.handleShareAction(e, point, salla.lang.get('pages.loyalty_program.copied'));
                return;
            }
            default: {
                // all other types are handled the default way (e.g. navigate to a URL)
            }
        }
    }
    getSubHeading(point) {
        switch (point.type) {
            case 'share':
                return (h("div", { class: "s-loyalty-program-point-subheading" }, h("h2", null, salla.lang.get('pages.loyalty_program.how_to_start')), h("p", null, salla.lang.get('pages.loyalty_program.three_simple_steps'))));
            case 'pos':
                return (h("div", { class: "s-loyalty-program-point-subheading" }, h("h2", null, salla.lang.get('pages.loyalty_program.how_to_start')), h("p", null, salla.lang.get('pages.loyalty_program.two_simple_steps'))));
            default:
                return '';
        }
    }
    getTrailingContent(point) {
        switch (point.type) {
            case 'first_order':
            case 'profile':
                return h("p", { class: "s-loyalty-program-points-completed-note" }, salla.lang.get('pages.loyalty_program.one_time_points'));
            default:
                return point.is_completed ? h("p", { class: "s-loyalty-program-points-completed-note" }, salla.lang.get('pages.loyalty_program.one_time_points')) : '';
        }
    }
    render() {
        return (h("div", { key: 'e48e7e3f5e8327b840c3d85685e0b71bffefd855' }, h("div", { key: 'bf0defb51f62aeb2830261d5daed101c55f84d7b', onClick: () => closeModals(() => this.modal.open()), class: "s-loyalty-program-point-wrapper" }, h("div", { key: '0e6121e7f7daeec3a96bdaaa2427978f4215fb16', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-sm s-loyalty-program-circle-variant-fill" }, h("span", { key: '8422ec6e483f05d514170df5916436a9126d4237', class: this.point.icon })), h("div", { key: '928d8ed9a8442dd20b218a7713ad6e493d88bc7d', class: "s-loyalty-program-points-badge-mobile" }, h("salla-badge", { key: '35fc26961a50c707d29a726405a2f2c48c5a296f', size: "xs", bg: "transparent" }, h("span", { key: 'd2b06eceeec70a9561d3612f337035dbc404bf2d', innerHTML: SIGift }), formattedPointsJsx(this.point))), h("div", { key: '9ca25c5c22d499bee7bd03c83b221deecaa385c7', class: "s-loyalty-program-points-badge-desktop" }, h("salla-badge", { key: 'bbf54dcce2af313a735de53f3297911b0a28433f', size: "sm", bg: "transparent" }, h("span", { key: '6832cb1bf6bf23e1c3e221e0e853b87bdf059b76', innerHTML: SIGift }), formattedPointsJsx(this.point))), h("p", { key: '0dab348c2d73b95d2a7054130dd8c4414b588a42', class: "s-loyalty-program-point-description" }, this.point.name), this.point.is_completed ?
            h("a", { class: {
                    's-loyalty-program-points-action': true,
                    's-loyalty-program-points-action-completed': this.point.is_completed,
                    's-loyalty-program-points-action-incomplete': !this.point.is_completed,
                } }, salla.lang.get('pages.loyalty_program.completed'))
            : h("a", { href: this.point.url, onClick: e => this.handleAction(e, this.point), class: {
                    's-loyalty-program-points-action': true,
                    's-loyalty-program-points-action-completed': this.point.is_completed,
                    's-loyalty-program-points-action-incomplete': !this.point.is_completed,
                } }, this.point.description)), h("salla-modal", { key: '209bd22b0a09f173dd74a79b0ab2dcf0c41b98d1', ref: modal => this.modal = modal, class: "s-loyalty-program-point-modal s-loyalty-program-modal", width: window.matchMedia('(min-width: 768px)').matches ? 'md' : 'sm', noPadding: true }, h("div", { key: 'adf4dc82940f41c943f095519e43e029602554e0', class: "s-loyalty-program-points-modal-header" }, h("h1", { key: '88d0babfddde45978760c71825ad01e81b9d7b70', class: "s-loyalty-program-points-modal-info" }, this.point.name)), h("div", { key: '387201fe515701d3e39595569cd5dd858dbe41e2', class: "s-loyalty-program-modal-scrollable-content" }, h("div", { key: '8460fd33cedcd3c78d299fd1f4f9dfb2d817663e', class: "s-loyalty-program-points-modal-main" }, h("div", { key: 'dc5840eb12f44f395fac4b2fa41616897ce3b804', class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xl s-loyalty-program-circle-variant-fill" }, h("span", { key: 'dab41d922110962182ff4a1ec53a7f01fde7400c', class: this.point.icon })), h("salla-badge", { key: 'e7947363e9dacb42eb03b97532ed1b6b3a606d73', size: "sm", bg: "light" }, h("span", { key: 'f567bdf3fb75d7bc28d9eb78a6b11dcc74f7e608', innerHTML: SIGift }), h("span", { key: 'd8fc1f40a225001a90ad6213f924520f3a3fbebc', class: "s-loyalty-program-points-badge-points" }, formattedPointsJsx(this.point)))), this.getSubHeading(this.point), h("div", { key: '12e2bf5a9aab51c3bf1c0ec10395751beaf846a3', class: "s-loyalty-program-points-modal-details" }, h("div", { key: '17dc3ff458f8cfea3028a47e54df522310cc0b1d', class: "s-loyalty-program-points-chains-wrapper" }, h("ul", { key: '4b1b0700e1d260a57fe7093421cb8faa8e68d024', class: "s-loyalty-program-points-chain-list" }, !!this.point.steps && Object.keys(this.point.steps).length > 0
            ? Object.values(this.point.steps).map((step, idx) => {
                const stepsArray = Object.values(this.point.steps);
                const isLastItem = idx === stepsArray.length - 1;
                return (h("li", { class: "s-loyalty-program-points-chain-item" }, h("div", { class: "s-loyalty-program-points-chain-icon" }, h("div", { class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xs s-loyalty-program-circle-variant-outline-primary" }, sicons[step.key]), !isLastItem && h("div", { class: "s-loyalty-program-points-chain-line" })), h("div", { class: "s-loyalty-program-points-chain-content" }, h("salla-badge", { size: "xs", color: "primary-900", bg: "primary-100" }, h("span", null, salla.lang.get(`pages.loyalty_program.step_${idx + 1}`))), h("p", { class: "s-loyalty-program-points-chain-description" }, step.title || step.name))));
            })
            : this.point.conditions?.map((condition, idx) => {
                const isLastItem = idx === this.point.conditions.length - 1;
                return (h("li", { class: "s-loyalty-program-points-chain-item" }, h("div", { class: "s-loyalty-program-points-chain-icon" }, h("div", { class: "s-loyalty-program-circle-base s-loyalty-program-circle-size-xs s-loyalty-program-circle-variant-outline-primary" }, sicons[condition.key]), !isLastItem && h("div", { class: "s-loyalty-program-points-chain-line" })), h("div", { class: "s-loyalty-program-points-chain-content" }, h("salla-badge", { size: "xs", color: "primary-900", bg: "primary-100" }, h("span", { innerHTML: SIGift }), formattedPointsJsx(condition.points ?? 0)), h("p", { class: "s-loyalty-program-points-chain-description" }, condition.name))));
            }))), this.getTrailingContent(this.point)), !this.point.branches?.length ? '' : h("div", { class: "s-loyalty-program-points-modal-list" }, h("div", { class: "s-loyalty-program-point-details-branches" }, h("h2", null, salla.lang.get('pages.loyalty_program.branches')), h("p", null, salla.lang.get('pages.loyalty_program.shop_from_branches'))), h("div", { class: "s-loyalty-program-points-modal-list-wrapper" }, h("ul", null, this.point.branches.map((branch) => (h("li", { class: "s-loyalty-program-points-modal-list-item" }, h("p", null, branch.name), h("salla-badge", { size: "sm", bg: "transparent" }, h("span", { innerHTML: SIGift }), h("a", { href: branch.location ? `https://www.google.com/maps?q=${branch.location.lat},${branch.location.lon}` : '#', target: "_blank", rel: "noopener noreferrer" }, branch.address_description))))))))), h("div", { key: '8984c9e7f20a766c70c25a85b752a2f61fd9c490', class: "s-loyalty-program-points-modal-action" }, h("a", { key: '6ee995bf10cd3f9efac2baac8413e7405981389f', href: this.point.url, onClick: (e) => (e.stopPropagation(), this.handleAction(e, this.point)), class: {
                's-loyalty-program-points-action': true,
                's-loyalty-program-points-action-completed': this.point.is_completed,
                's-loyalty-program-points-action-incomplete': !this.point.is_completed,
            } }, this.point.is_completed ? salla.lang.get('pages.loyalty_program.completed') : this.point.description)))));
    }
    static get is() { return "salla-loyalty-point"; }
    static get originalStyleUrls() {
        return {
            "$": ["salla-loyalty-program.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["salla-loyalty-program.css"]
        };
    }
    static get properties() {
        return {
            "point": {
                "type": "unknown",
                "attribute": "point",
                "mutable": false,
                "complexType": {
                    "original": "Point",
                    "resolved": "Point",
                    "references": {
                        "Point": {
                            "location": "import",
                            "path": "./interfaces",
                            "id": "src/components/salla-loyalty-program/interfaces.ts::Point"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get elementRef() { return "host"; }
}
