// tslint:disable-next-line:no-implicit-dependencies
import { h } from "@stencil/core";
import { Verifier } from "authly";
export class Form {
    constructor() {
        this.state = "created";
    }
    componentWillLoad() {
        Verifier.create("public").verify(this.apiKey).then(payload => this.payload = payload);
        const styleLink = document.querySelector("link[rel=stylesheet][href^='https://theme.payfunc.com/']");
        if (styleLink) {
            const themeLink = styleLink.href.substring(26);
            this.theme = themeLink.substring(0, themeLink.indexOf("/"));
        }
    }
    async handleTrigger(event) {
        if (event.detail.value && event.detail.value.status == 400 && event.detail.value.type == "missing property" && event.detail.value.content && event.detail.value.content.property == "pares") {
            this.verify = { pareq: event.detail.value.content.pareq, url: event.detail.value.content.url, issuer: this.payload ? this.payload.iss ? this.payload.iss : "" : "" };
        }
        else if (event.detail.name == "pares") {
            this.verify = undefined;
            if (this.authorization)
                this.frame.send("card", { name: "submit", value: { authorization: this.authorization, key: this.apiKey, parent: window.location.origin } });
        }
        else {
            this.verify = undefined;
            this.changed.emit(this.value = event.detail.value);
            this.state = event.detail.name == "cardPaymentSuccess" ? "succeeded" : "failed";
            if (this.received) {
                this.received(this.state, event.detail.value);
                this.received = undefined;
            }
        }
    }
    submit(authorization) {
        this.authorization = authorization;
        return new Promise(callback => {
            if (this.frame) {
                this.received = (_, response) => callback(response);
                this.frame.send("card", { name: "submit", value: { authorization, key: this.apiKey, parent: window.location.origin } });
                this.state = "processing";
            }
        });
    }
    render() {
        return [
            this.payload ? h("smoothly-frame", { url: this.payload.iss + "/ui/web-app/" + (this.theme ? "?theme=" + this.theme : ""), name: "card", ref: (element) => this.frame = element }) : [],
            this.verify ?
                h("smoothly-dialog", { closable: true },
                    h("smoothly-frame", { url: `${this.verify.issuer}/redirect/post?target=${encodeURIComponent(this.verify.url)}&PaReq=${encodeURIComponent(this.verify.pareq)}&MD=MD&TermUrl=${encodeURIComponent(`${this.verify.issuer}/emv3d/done?parent=${window.location.origin}`)}`, name: "parent", style: { height: "90vh" } })) :
                [],
        ];
    }
    static get is() { return "cardfunc-element"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["style.css"]
    }; }
    static get styleUrls() { return {
        "$": ["style.css"]
    }; }
    static get properties() { return {
        "apiKey": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "api-key",
            "reflect": false
        },
        "state": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "\"failed\" | \"succeeded\" | \"processing\" | \"created\"",
                "resolved": "\"created\" | \"failed\" | \"processing\" | \"succeeded\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "state",
            "reflect": true,
            "defaultValue": "\"created\""
        },
        "value": {
            "type": "unknown",
            "mutable": true,
            "complexType": {
                "original": "AuthorizationCreatableSafe",
                "resolved": "AuthorizationCreatableSafe | undefined",
                "references": {
                    "AuthorizationCreatableSafe": {
                        "location": "import",
                        "path": "../model"
                    }
                }
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            }
        }
    }; }
    static get states() { return {
        "theme": {},
        "verify": {},
        "authorization": {},
        "payload": {}
    }; }
    static get events() { return [{
            "method": "changed",
            "name": "changed",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "Authorization",
                "resolved": "Authorization",
                "references": {
                    "Authorization": {
                        "location": "import",
                        "path": "@cardfunc/model"
                    }
                }
            }
        }]; }
    static get methods() { return {
        "submit": {
            "complexType": {
                "signature": "(authorization: AuthorizationCreatableSafe) => Promise<string | Authorization | Error>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "Authorization": {
                        "location": "import",
                        "path": "@cardfunc/model"
                    },
                    "Error": {
                        "location": "import",
                        "path": "gracely"
                    },
                    "AuthorizationCreatableSafe": {
                        "location": "import",
                        "path": "../model"
                    },
                    "Token": {
                        "location": "import",
                        "path": "authly"
                    }
                },
                "return": "Promise<string | Authorization | Error>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get listeners() { return [{
            "name": "trigger",
            "method": "handleTrigger",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
