import { h, Host, Fragment } from "@stencil/core";
import { SettingsIcon } from "../../../utils/Icons";
import { Store } from "../../../utils/Datastore";
/**
 * Displays a signature field. Various field types are supported, including traditional Signature and Initials types as well as
 * input types like text and checkbox.
 */
export class VerdocsFieldPayment {
    constructor() {
        /**
         * Fields may be attached to templates or envelopes, but only template fields may be edited.
         */
        this.source = 'template';
        /**
         * The source template or envelope ID the field is found in.
         */
        this.sourceid = '';
        /**
         * The name of the field to display.
         */
        this.fieldname = '';
        /**
         * Override the field's settings. This is intended to be used during signing when fields are being
         * mutated.
         */
        this.field = null;
        /**
         * If set, overrides the field's settings object. Primarily used to support "preview" modes where all fields are disabled.
         */
        this.disabled = false;
        /**
         * If set, the field is considered "done" and is drawn in a display-final-value state.
         */
        this.done = false;
        /**
         * If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be
         * changed, so it should typically only be enabled in the Builder.
         */
        this.editable = false;
        /**
         * If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields.
         */
        this.moveable = false;
        /**
         * If set, the field will be be scaled horizontally by this factor.
         */
        this.xscale = 1;
        /**
         * If set, the field will be be scaled vertically by this factor.
         */
        this.yscale = 1;
        /**
         * The page the field is on
         */
        this.pagenumber = 1;
        this.showingProperties = false;
        this.focused = false;
        this.signed = false;
        this.signatureUrl = '';
        /**
         * If set, the field will be colored using this index value to select the background color.
         */
        this.roleindex = 0;
    }
    componentWillLoad() {
        // Load validators
        // Load fields
        // Get role names
        if (this.recipients && this.recipients.length > 0) {
            const preparer = this.recipients.find((r) => r.type === 'preparer');
            console.log('Found preparer', preparer);
            if (preparer) {
                this.preparedMessage = `Prepared by ${preparer['full_name']}`;
            }
        }
    }
    async focusField() {
        // We don't have a visible input that we can actually focus on, so we fake it
        this.focused = true;
        setTimeout(() => {
            this.focused = false;
        }, 500);
    }
    async showSettingsPanel() {
        const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
        if (settingsPanel && settingsPanel.showPanel) {
            settingsPanel.showPanel();
        }
    }
    async hideSettingsPanel() {
        const settingsPanel = document.getElementById(`verdocs-settings-panel-${this.fieldname}`);
        if (settingsPanel && settingsPanel.hidePanel) {
            settingsPanel.hidePanel();
        }
    }
    render() {
        const { source, sourceid, fieldname, editable = false, done = false, disabled = false, focused, xscale = 1, yscale = 1 } = this;
        const { index, field } = Store.getField(source, sourceid, fieldname, this.field);
        const signerClass = `signer-${(index % 10) + 1}`;
        if (!field) {
            return h(Fragment, null);
        }
        if (done) {
            return h(Host, { class: { done } }, "$\u2713");
        }
        return (h(Host, { class: { focused, disabled, [signerClass]: true } }, h("button", { class: { hide: this.signed } }, "$"), this.signed ? h("div", { class: "frame" }) : h("div", { style: { display: 'none' } }), h("img", { width: "100%", height: "100%", src: this.signatureUrl, alt: "Payment Icon" }), editable && (h(Fragment, null, h("div", { id: `verdocs-settings-panel-trigger-${fieldname}`, style: { transform: `scale(${Math.floor((1 / xscale) * 1000) / 1000}, ${Math.floor((1 / yscale) * 1000) / 1000})` }, class: "settings-icon", innerHTML: SettingsIcon, onClick: (e) => {
                e.stopPropagation();
                this.showingProperties = !this.showingProperties;
            } }), this.showingProperties && (h("verdocs-portal", { anchor: `verdocs-settings-panel-trigger-${field.name}`, onClickAway: () => (this.showingProperties = false) }, h("verdocs-template-field-properties", { templateId: sourceid, fieldName: field.name, onClose: () => (this.showingProperties = false), onDelete: () => {
                var _a;
                (_a = this.deleted) === null || _a === void 0 ? void 0 : _a.emit({ fieldName: fieldname });
                return this.hideSettingsPanel();
            }, onSettingsChanged: e => {
                var _a;
                (_a = this.settingsChanged) === null || _a === void 0 ? void 0 : _a.emit(e.detail);
                return this.hideSettingsPanel();
            }, helpText: 'Check boxes allow the user to select one or more (non-exclusive) options.' })))))));
    }
    static get is() { return "verdocs-field-payment"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-field-payment.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-field-payment.css"]
        };
    }
    static get properties() {
        return {
            "source": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'template' | 'envelope'",
                    "resolved": "\"envelope\" | \"template\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Fields may be attached to templates or envelopes, but only template fields may be edited."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "source",
                "defaultValue": "'template'"
            },
            "sourceid": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The source template or envelope ID the field is found in."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "sourceid",
                "defaultValue": "''"
            },
            "fieldname": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The name of the field to display."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "fieldname",
                "defaultValue": "''"
            },
            "field": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IEnvelopeField | null | undefined",
                    "resolved": "IEnvelopeField",
                    "references": {
                        "IEnvelopeField": {
                            "location": "import",
                            "path": "@verdocs/js-sdk",
                            "id": "node_modules::IEnvelopeField"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Override the field's settings. This is intended to be used during signing when fields are being\nmutated."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "null"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If set, overrides the field's settings object. Primarily used to support \"preview\" modes where all fields are disabled."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "done": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If set, the field is considered \"done\" and is drawn in a display-final-value state."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "done",
                "defaultValue": "false"
            },
            "editable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If set, a settings icon will be displayed on hover. The settings shown allow the field's recipient and other settings to be\nchanged, so it should typically only be enabled in the Builder."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "editable",
                "defaultValue": "false"
            },
            "moveable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If set, the field may be dragged to a new location. This should only be enabled in the Builder, or for self-placed fields."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "moveable",
                "defaultValue": "false"
            },
            "xscale": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If set, the field will be be scaled horizontally by this factor."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "xscale",
                "defaultValue": "1"
            },
            "yscale": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If set, the field will be be scaled vertically by this factor."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "yscale",
                "defaultValue": "1"
            },
            "pagenumber": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The page the field is on"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "pagenumber",
                "defaultValue": "1"
            },
            "fields": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "any[]",
                    "resolved": "any[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "pageNum": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "page-num"
            },
            "roleName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "role-name"
            },
            "fieldId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "field-id"
            },
            "recipients": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "recipients"
            },
            "selectedRoleName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "selected-role-name"
            },
            "pdfPages": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "any[]",
                    "resolved": "any[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "currentSignature": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "current-signature"
            },
            "currentSignatureId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "current-signature-id"
            },
            "currentInitial": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "current-initial"
            },
            "currentInitialId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "current-initial-id"
            },
            "signed": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "signed",
                "defaultValue": "false"
            },
            "roleindex": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If set, the field will be colored using this index value to select the background color."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "roleindex",
                "defaultValue": "0"
            }
        };
    }
    static get states() {
        return {
            "showingProperties": {},
            "focused": {},
            "preparedMessage": {},
            "signatureUrl": {}
        };
    }
    static get events() {
        return [{
                "method": "settingsChanged",
                "name": "settingsChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when the field's settings are changed."
                },
                "complexType": {
                    "original": "{fieldName: string; field: ITemplateField}",
                    "resolved": "{ fieldName: string; field: ITemplateField; }",
                    "references": {
                        "ITemplateField": {
                            "location": "import",
                            "path": "@verdocs/js-sdk",
                            "id": "node_modules::ITemplateField"
                        }
                    }
                }
            }, {
                "method": "deleted",
                "name": "deleted",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when the field is deleted."
                },
                "complexType": {
                    "original": "{fieldName: string}",
                    "resolved": "{ fieldName: string; }",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "focusField": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            },
            "showSettingsPanel": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            },
            "hideSettingsPanel": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            }
        };
    }
}
//# sourceMappingURL=verdocs-field-payment.js.map
