import { toastController } from "@ionic/core";
import { Component, Event, Listen, Prop, State, h, } from "@stencil/core";
import state from "../../../store";
export class ModalEsign {
  constructor() {
    this.headerTitle = "E-sign";
    this.loading = false;
    this.signed = false;
    this.isLoaded = false;
  }
  onModalPresent() {
    this.isLoaded = true;
  }
  async onChange(event) {
    var _a;
    if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.name) === "signature") {
      const signature = await event.target.toDataURL();
      if (signature.length <= 10) {
        alert("Signature is required to submit!");
        return;
      }
      this.loading = true;
      this.fireenjinSubmit.emit({
        endpoint: "signContract",
        data: {
          jobId: this.jobId,
          signature: await event.target.toDataURL(),
          templateId: this.templateId,
        },
      });
    }
  }
  async onSuccess(event) {
    var _a, _b;
    if (((_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.endpoint) === "signContract") {
      this.presentToast();
      this.loading = false;
      this.signed = true;
      this.floodteamCloseModal.emit();
    }
    else if (((_b = event.detail) === null || _b === void 0 ? void 0 : _b.endpoint) === "findJob") {
      this.loading = false;
    }
  }
  async presentToast() {
    const toast = await toastController.create({
      message: `File(s) added successfully to Efile!`,
      duration: 2000,
    });
    toast.present();
  }
  render() {
    return [
      h("ion-header", null,
        h("ion-toolbar", null,
          h("ion-title", null, this.headerTitle),
          h("ion-buttons", { slot: "end" },
            h("ion-button", { onClick: () => this.floodteamCloseModal.emit() },
              h("ion-icon", { slot: "icon-only", name: "close-circle-outline" }))))),
      h("ion-content", { class: {
          "ion-padding": true,
          "is-loading": this.loading,
        } }, this.signed ? (h("div", { style: {
          width: "90%",
          maxWidth: "500px",
          margin: "0 auto",
        } },
        h("ion-icon", { name: "checkmark-circle", color: "success", style: {
            height: "150px",
            width: "150px",
            display: "block",
            margin: "30px auto",
          } }),
        h("h1", null, "Signature Submitted!"),
        h("p", null, "Thank you for your time, you can now close this browser tab."))) : (h("div", null,
        h("floodteam-template", { class: "fullscreen", templateId: this.templateId, data: {
            timestamp: new Date().toISOString(),
            job: state === null || state === void 0 ? void 0 : state.job,
            user: state === null || state === void 0 ? void 0 : state.profile,
          } })))),
      this.isLoaded && (h("floodteam-signature-pad", { class: {
          "is-loading": this.loading,
        }, ref: (el) => (this.signaturePadEl = el) })),
    ];
  }
  static get is() { return "modal-esign"; }
  static get properties() { return {
    "jobId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "job-id",
      "reflect": false
    },
    "templateId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "template-id",
      "reflect": false
    },
    "headerTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "header-title",
      "reflect": false,
      "defaultValue": "\"E-sign\""
    }
  }; }
  static get states() { return {
    "loading": {},
    "signed": {},
    "isLoaded": {}
  }; }
  static get events() { return [{
      "method": "fireenjinSubmit",
      "name": "fireenjinSubmit",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "floodteamCloseModal",
      "name": "floodteamCloseModal",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get listeners() { return [{
      "name": "ionModalDidPresent",
      "method": "onModalPresent",
      "target": "document",
      "capture": false,
      "passive": false
    }, {
      "name": "ionChange",
      "method": "onChange",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "fireenjinSuccess",
      "method": "onSuccess",
      "target": "body",
      "capture": false,
      "passive": false
    }]; }
}
//# sourceMappingURL=modal-esign.js.map