import { HeadingTag } from "../../../globals/HeadingTag";
import { Host, h } from "@stencil/core";
import { bankid } from "pn-design-assets/pn-assets/icons.js";
import { PnLevelUpService } from "./pn-level-up.service";
import { LocalStorageService } from "../../../globals/LocalStorageService";
export class PnLevelUp {
    constructor() {
        this.heading = undefined;
        this.headingLevel = 'h2';
        this.preamble = undefined;
        this.imageUrl = undefined;
        this.imageAltText = undefined;
        this.endpoint = undefined;
        this.webModalContinueOtherDeviceLabel = undefined;
        this.webModalContinueThisDeviceLabel = undefined;
        this.mobileModalContinueThisDeviceLabel = undefined;
        this.mobileModalContinueOtherDeviceLabel = undefined;
        this.modalInstructionPhoneLineOne = undefined;
        this.modalInstructionPhoneLineTwo = undefined;
        this.modalInstructionPhoneLineThree = undefined;
        this.modalHeadingText = undefined;
        this.modalOutdatedQRMessage = undefined;
        this.modalExpiresInMessage = undefined;
        this.qrAriaLabel = undefined;
        this.leveledupMessage = undefined;
        this.isLeveledUp = false;
        this.isLoading = false;
        this.isRecentLeveledUp = false;
        this.errorMessage = undefined;
    }
    showModal = false;
    _android = 'android';
    _ios = 'ios';
    _web = 'web';
    levelupLocalStorageKey = 'levelup';
    _system;
    _levelupService;
    _storage = new LocalStorageService();
    modal;
    componentWillLoad() {
        if (!this.isLeveledUp) {
            this.checkRecentLevelUp();
        }
        this._levelupService = new PnLevelUpService(this.endpoint);
        this._system = this.getDeviceType();
    }
    getDeviceType() {
        const userAgent = navigator.userAgent;
        if (/android/i.test(userAgent)) {
            return this._android;
        }
        if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
            return this._ios;
        }
        return this._web;
    }
    openLocalApp = async () => {
        this.isLoading = true;
        let authResponse = await this._levelupService.levelupAuthorize(this._system, null);
        window.location.href = authResponse.url;
        this.isLoading = false;
        await this._levelupService.levelupTokenGrant(authResponse.id, '30', null).then((response) => {
            if (response.code === 200) {
                this._levelupService.newLevelupUser();
                this.isRecentLeveledUp = true;
                this.errorMessage = null;
            }
            else {
                this.errorMessage = response.customMessage;
            }
        });
    };
    openModal() {
        if (this.showModal) {
            this.modal.setAttribute('open', 'false');
            this.showModal = false;
        }
        this.modal.setAttribute('open', 'true');
        this.showModal = true;
    }
    renderWebButtonOptions() {
        return (h("div", { class: "cta", role: "group" }, this.webModalContinueOtherDeviceLabel &&
            h("pn-button", { icon: bankid, "left-icon": 'true', appearance: 'default', label: this.webModalContinueOtherDeviceLabel, onClick: () => this.openModal() }), this.webModalContinueThisDeviceLabel &&
            h("pn-button", { icon: bankid, "left-icon": 'true', appearance: 'light', variant: 'outlined', label: this.webModalContinueThisDeviceLabel, onClick: () => this.openLocalApp(), loading: this.isLoading })));
    }
    renderMobileButtonOptions() {
        return (h("div", { class: "cta", role: "group" }, this.mobileModalContinueThisDeviceLabel &&
            h("pn-button", { icon: bankid, "left-icon": 'true', appearance: 'default', label: this.mobileModalContinueThisDeviceLabel, onClick: () => this.openLocalApp(), loading: this.isLoading }), this.mobileModalContinueOtherDeviceLabel &&
            h("pn-button", { icon: bankid, "left-icon": 'true', appearance: 'light', variant: 'outlined', label: this.mobileModalContinueOtherDeviceLabel, onClick: () => this.openModal() })));
    }
    presentResult() {
        if (this.isLeveledUp) {
            return null;
        }
        return (h("pn-toast", { text: this.leveledupMessage, appearance: 'success' }));
    }
    checkRecentLevelUp() {
        let levelupStorage = this._storage.get(this.levelupLocalStorageKey);
        if (levelupStorage === null) {
            this.isRecentLeveledUp = false;
        }
        else if (levelupStorage.expire > Date.now()) {
            this.isRecentLeveledUp = true;
        }
        else {
            this._storage.remove(this.levelupLocalStorageKey);
            this.isRecentLeveledUp = false;
        }
    }
    get hasButtonTexts() {
        if (this._system === this._web) {
            return Boolean(this.webModalContinueOtherDeviceLabel) && Boolean(this.webModalContinueThisDeviceLabel);
        }
        else {
            return Boolean(this.mobileModalContinueOtherDeviceLabel) && Boolean(this.mobileModalContinueThisDeviceLabel);
        }
    }
    render() {
        const headingId = 'pn-level-up-heading';
        return (h(Host, { key: '25c4c9496efe071ba3c2970b03efa02feb8db58c' }, this.isLeveledUp || this.isRecentLeveledUp
            ? (this.presentResult())
            : (h("div", { class: "pn-level-up", role: "region", "aria-labelledby": this.heading ? headingId : undefined }, h("div", { class: "content" }, this.heading && (h(HeadingTag, { id: headingId, level: this.headingLevel, cssClass: "heading" }, this.heading)), this.preamble && (h("div", { class: "preamble" }, this.preamble)), this.hasButtonTexts && this._system === this._web && this.renderWebButtonOptions(), this.hasButtonTexts && this._system !== this._web && this.renderMobileButtonOptions()), h("div", { class: "image-container", "aria-hidden": !this.imageAltText }, this.imageUrl && h("img", { class: "image graphics", src: this.imageUrl, alt: this.imageAltText || '', loading: "lazy" })))), this.errorMessage && h("pn-toast", { key: '345b539923dca4d060f40aff186aeee7d3a94891', text: this.errorMessage, appearance: 'warning' }), h("pn-level-up-modal", { key: 'b54cf4b905d8db6af721d7d4cd3040f4dba6cbc0', ref: el => this.modal = el, open: false, endpoint: this.endpoint, "instruction-phone-line-one": this.modalInstructionPhoneLineOne, "instruction-phone-line-two": this.modalInstructionPhoneLineTwo, "instruction-phone-line-three": this.modalInstructionPhoneLineThree, "heading-text": this.modalHeadingText, "outdated-q-r-message": this.modalOutdatedQRMessage, "expires-in-message": this.modalExpiresInMessage, "qr-aria-label": this.qrAriaLabel, system: this._android })));
    }
    static get is() { return "pn-level-up"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-level-up.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-level-up.css"]
        };
    }
    static get properties() {
        return {
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "heading",
                "reflect": false
            },
            "headingLevel": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "HeadingLevel",
                    "resolved": "HeadingLevel",
                    "references": {
                        "HeadingLevel": {
                            "location": "import",
                            "path": "@/components",
                            "id": "src/components.d.ts::unknown"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "heading-level",
                "reflect": false,
                "defaultValue": "'h2'"
            },
            "preamble": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "preamble",
                "reflect": false
            },
            "imageUrl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "image-url",
                "reflect": false
            },
            "imageAltText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "image-alt-text",
                "reflect": false
            },
            "endpoint": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "endpoint",
                "reflect": false
            },
            "webModalContinueOtherDeviceLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "web-modal-continue-other-device-label",
                "reflect": false
            },
            "webModalContinueThisDeviceLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "web-modal-continue-this-device-label",
                "reflect": false
            },
            "mobileModalContinueThisDeviceLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "mobile-modal-continue-this-device-label",
                "reflect": false
            },
            "mobileModalContinueOtherDeviceLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "mobile-modal-continue-other-device-label",
                "reflect": false
            },
            "modalInstructionPhoneLineOne": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "modal-instruction-phone-line-one",
                "reflect": false
            },
            "modalInstructionPhoneLineTwo": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "modal-instruction-phone-line-two",
                "reflect": false
            },
            "modalInstructionPhoneLineThree": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "modal-instruction-phone-line-three",
                "reflect": false
            },
            "modalHeadingText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "modal-heading-text",
                "reflect": false
            },
            "modalOutdatedQRMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "modal-outdated-q-r-message",
                "reflect": false
            },
            "modalExpiresInMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "modal-expires-in-message",
                "reflect": false
            },
            "qrAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "qr-aria-label",
                "reflect": false
            },
            "leveledupMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "leveledup-message",
                "reflect": false
            },
            "isLeveledUp": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "is-leveled-up",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "isLoading": {},
            "isRecentLeveledUp": {},
            "errorMessage": {}
        };
    }
}
//# sourceMappingURL=pn-level-up.js.map
