import { isFieldFilled } from "@verdocs/js-sdk";
import { h } from "@stencil/core";
import { getFieldLabel } from "../../../utils/utils";
export class VerdocsSigningProgress {
    constructor() {
        /**
         * Display mode
         */
        this.mode = 'start';
        /**
         * The name of the currently focused field (to highlight it and show its label)
         */
        this.focusedField = '';
        /**
         * All fillable fields for the current recipient
         */
        this.fields = [];
        /**
         * All fields for the recipient, used to check filled status (may include non-fillable)
         */
        this.recipientFields = [];
    }
    renderSuccessIcon() {
        return (h("svg", { width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2ZM10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3ZM13.3584 7.64645C13.532 7.82001 13.5513 8.08944 13.4163 8.28431L13.3584 8.35355L9.35355 12.3584C9.17999 12.532 8.91056 12.5513 8.71569 12.4163L8.64645 12.3584L6.64645 10.3584C6.45118 10.1632 6.45118 9.84658 6.64645 9.65131C6.82001 9.47775 7.08944 9.45846 7.28431 9.59346L7.35355 9.65131L9 11.298L12.6513 7.64645C12.8466 7.45118 13.1632 7.45118 13.3584 7.64645Z", fill: "#107C10" })));
    }
    renderContent(fieldLabel, fieldCompleted, readyToSubmit) {
        if (this.mode === 'start') {
            return h("div", { class: "field-label" }, fieldLabel);
        }
        if (fieldCompleted && readyToSubmit) {
            return (h("div", { class: "field-completed" }, h("div", { class: "icon" }, this.renderSuccessIcon()), h("span", { class: "text" }, "Ready to submit.")));
        }
        return h("div", { class: "field-label" }, fieldLabel);
    }
    renderFooter(current, total, requiredRemaining) {
        if (this.mode === 'start') {
            return (h("button", { class: "btn start", onClick: () => this.started.emit() }, "Start Signing"));
        }
        return (h("div", { class: "nav-buttons" }, requiredRemaining === 0 ? (h("button", { class: "btn submit", onClick: () => this.exit.emit() }, "Submit")) : ([
            h("button", { class: "btn previous", disabled: current <= 1, onClick: () => this.previous.emit() }, "Previous"),
            h("button", { class: "btn next", disabled: current >= total, onClick: () => this.next.emit() }, "Next"),
        ])));
    }
    renderCompleted() {
        return (h("div", { class: "card completed" }, h("div", { class: "header-completed" }, h("div", { class: "icon" }, this.renderSuccessIcon()), "Ready to Submit"), h("div", { class: "description" }, "You have entered all requested signatures. Select Submit to complete the signing process."), h("div", { class: "separator" }), h("button", { class: "btn submit", onClick: () => this.exit.emit() }, "Submit")));
    }
    render() {
        if (this.mode === 'completed') {
            return this.renderCompleted();
        }
        const isFilled = (f) => isFieldFilled(f, this.recipientFields) && (f.type !== 'dropdown' || !!f.value) && (f.type !== 'radio' || f.value === 'true') && (f.type !== 'checkbox' || f.value === 'true');
        const requiredFields = this.fields.filter(f => f.required);
        const requiredRemaining = requiredFields.filter(f => !isFilled(f)).length;
        const optionalFields = this.fields.filter(f => !f.required);
        const optionalRemaining = optionalFields.filter(f => !isFilled(f)).length;
        const focusedFieldObj = this.fields.find(f => f.name === this.focusedField);
        const currentIndex = this.fields.findIndex(f => f.name === this.focusedField) + 1;
        const totalFields = this.fields.length;
        return (h("div", { class: "card" }, h("div", { class: "header" }, h("div", { class: "progress-line" }, requiredRemaining, " of ", requiredFields.length, " required fields remaining"), optionalFields.length > 0 && (h("div", { class: "progress-line optional" }, optionalRemaining, " of ", optionalFields.length, " optional fields remaining"))), h("div", { class: "body" }, this.renderContent(getFieldLabel(focusedFieldObj), focusedFieldObj ? !!isFilled(focusedFieldObj) : false, requiredRemaining === 0)), h("div", { class: "separator" }), this.renderFooter(Math.max(1, currentIndex), totalFields, requiredRemaining)));
    }
    static get is() { return "verdocs-signing-progress"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-signing-progress.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-signing-progress.css"]
        };
    }
    static get properties() {
        return {
            "mode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'start' | 'signing' | 'completed'",
                    "resolved": "\"completed\" | \"signing\" | \"start\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Display mode"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "mode",
                "defaultValue": "'start'"
            },
            "focusedField": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The name of the currently focused field (to highlight it and show its label)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "focused-field",
                "defaultValue": "''"
            },
            "fields": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IEnvelopeField[]",
                    "resolved": "IEnvelopeField[]",
                    "references": {
                        "IEnvelopeField": {
                            "location": "import",
                            "path": "@verdocs/js-sdk",
                            "id": "node_modules::IEnvelopeField",
                            "referenceLocation": "IEnvelopeField"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "All fillable fields for the current recipient"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "recipientFields": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IEnvelopeField[]",
                    "resolved": "IEnvelopeField[]",
                    "references": {
                        "IEnvelopeField": {
                            "location": "import",
                            "path": "@verdocs/js-sdk",
                            "id": "node_modules::IEnvelopeField",
                            "referenceLocation": "IEnvelopeField"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "All fields for the recipient, used to check filled status (may include non-fillable)"
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            }
        };
    }
    static get events() {
        return [{
                "method": "started",
                "name": "started",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when user clicks Start"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "next",
                "name": "next",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when user clicks Next"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "previous",
                "name": "previous",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when user clicks Previous"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "exit",
                "name": "exit",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when user clicks Submit"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
}
//# sourceMappingURL=verdocs-signing-progress.js.map
