import { h, Host } from "@stencil/core";
import { verifySigner } from "@verdocs/js-sdk";
import { DefaultEndpoint } from "../../../utils/Environment";
import { VerdocsToast } from "../../../utils/Toast";
/**
 * Prompt the user to confirm their identity with a one time code via email/SMS.
 */
export class VerdocsOtpDialog {
    constructor() {
        this.resendTimeout = null;
        /**
         * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
         */
        this.endpoint = DefaultEndpoint;
        /**
         * The type of dialog to display. Three modes are supported.
         */
        this.method = 'email';
        this.resendDisabled = true;
        this.response = '';
    }
    componentDidLoad() {
        this.startResendTimeout();
        // Give the parent time to finish what it's doing.
        setTimeout(() => {
            verifySigner(this.endpoint, { auth_method: this.method, code: '', resend: true })
                .then(r => {
                console.log('Resend result', r);
                this.response = '';
            })
                .catch(e => console.log('Error resending code', e));
        }, 1000);
    }
    disconnectedCallback() {
        if (this.resendTimeout) {
            clearTimeout(this.resendTimeout);
            this.resendTimeout = null;
        }
    }
    handleCancel() {
        this.exit.emit();
    }
    startResendTimeout() {
        this.resendDisabled = true;
        if (this.resendTimeout) {
            clearTimeout(this.resendTimeout);
        }
        this.resendTimeout = setTimeout(() => {
            this.resendDisabled = false;
        }, 30000);
    }
    handleResend() {
        this.startResendTimeout();
        verifySigner(this.endpoint, { auth_method: this.method, code: '', resend: true })
            .then(r => {
            console.log('Resend result', r);
            this.response = '';
            VerdocsToast('A new code has been sent.');
        })
            .catch(e => console.log('Error resending code', e));
    }
    handleSubmit() {
        this.startResendTimeout();
        verifySigner(this.endpoint, { auth_method: this.method, code: this.response })
            .then(response => {
            console.log('Verification completed', response);
            this.next.emit({ response });
            VerdocsToast('Thank you. Your verification was successful.');
        })
            .catch(e => {
            VerdocsToast('Invalid verification code. Please try again.');
            console.log('Invalid code', e);
        });
        this.response = '';
    }
    render() {
        return (h(Host, { key: '023b116ed7c27778ea10fe686ec7d7e8acbc469c' }, h("verdocs-dialog", { key: 'afa04b7f3fa6fef3b84d5b72e350a3f8df0bb869', persistent: true, onExit: () => this.handleCancel() }, h("div", { key: '9a3a47beae7443f5e2eaa674890f63b5720d7174', slot: "heading", class: "heading" }, h("div", { key: 'd674ef94306a3f8f236fd5e8410dc3450bc6ef3e', class: "title" }, "Verification Required")), h("div", { key: '7d56dcdca5d2cf1ab700049c603950cbe927539d', slot: "content", class: "content" }, h("div", { key: '83e0fa5e37cb319dc3623420b4a721d1b695651f', class: "help-box" }, h("div", { key: 'd20b15f97cf1d25acc32679bfac11b7dc1da4ee2', class: "help-details" }, h("div", { key: '83d1e2592612f37a6654eb40a8adda0946341ad8', class: "help-text" }, "Please check your messages for a one-time code. If you did not receive it, be sure to check your Spam/Junk folder."))), h("verdocs-text-input", { key: '849de4a9aec3b6c5de95da02012d76c6df9afd58', id: "verdocs-otp-input", value: this.response, onClick: e => e.stopPropagation(), placeholder: "Enter your one-time code...", onInput: (e) => (this.response = e.target.value) })), h("div", { key: 'bd907f037eb48b6df2bcc01eb7bf12037d8ff6e1', slot: "footer", class: "buttons footer" }, h("verdocs-button", { key: '480878ab4ac42ea4a52422ab66b48167086eae7e', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: 'd51b1fb3b14910035933eb8c963a5bd1b67e26fd', label: 'Resend', onClick: () => this.handleResend(), disabled: this.resendDisabled }), h("verdocs-button", { key: '64fdd8807c2464897de4f147aa3274fd09a200de', label: 'Submit', onClick: () => this.handleSubmit(), disabled: !this.response })))));
    }
    static get is() { return "verdocs-otp-dialog"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-otp-dialog.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-otp-dialog.css"]
        };
    }
    static get properties() {
        return {
            "endpoint": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "VerdocsEndpoint",
                    "resolved": "VerdocsEndpoint",
                    "references": {
                        "VerdocsEndpoint": {
                            "location": "import",
                            "path": "@verdocs/js-sdk",
                            "id": "node_modules::VerdocsEndpoint",
                            "referenceLocation": "VerdocsEndpoint"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "DefaultEndpoint"
            },
            "method": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'email' | 'sms'",
                    "resolved": "\"email\" | \"sms\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The type of dialog to display. Three modes are supported."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "method",
                "defaultValue": "'email'"
            }
        };
    }
    static get states() {
        return {
            "resendDisabled": {},
            "response": {}
        };
    }
    static get events() {
        return [{
                "method": "exit",
                "name": "exit",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "next",
                "name": "next",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when the process has completed successfully."
                },
                "complexType": {
                    "original": "{response: ISignerTokenResponse}",
                    "resolved": "{ response: ISignerTokenResponse; }",
                    "references": {
                        "ISignerTokenResponse": {
                            "location": "import",
                            "path": "@verdocs/js-sdk",
                            "id": "node_modules::ISignerTokenResponse",
                            "referenceLocation": "ISignerTokenResponse"
                        }
                    }
                }
            }];
    }
}
//# sourceMappingURL=verdocs-otp-dialog.js.map
