import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, Element, Host, Prop, State, h } from "@stencil/core";
import deepmerge from "deepmerge";
import { getProps } from "../../../utils/utils";
import { TAX_CONTEXT_NAMESPACE } from "../data";
import { DocusignIframe, } from "./docusign-iframe/DocusignIframe";
import { DocusignFormView } from "./sqm-docusign-form-view";
import { useDocusignForm } from "./useDocusignForm";
/**
 * @uiName DocuSign Document Submission
 * @exampleGroup Tax and Cash Components
 * @slots [{"name": "docusign-iframe", "title": "DocuSign IFrame Slot"}]
 */
export class DocusignForm {
  constructor() {
    this.ignored = true;
    /**
     * @uiName Setup progress
     */
    this.formStep = "Step {step} of {count}";
    /**
     * @uiName Step 3 title
     */
    this.taxForm = "Tax form";
    /**
     * Display the type of tax form that the participant must submit.
     * @uiName Tax form name
     */
    this.taxFormLabel = "{documentType} Tax Form";
    /**
     * Displayed at the top of the page to participants based in the US.
     * @uiName W-9 tax form description
     * @uiWidget textArea
     */
    this.taxFormDescription = "Participants based in the US need to submit a {documentType} form.";
    /**
     * @uiName Support link text
     */
    this.supportLink = "support team";
    /**
     * Displayed at the top of the page to individuals joining a US program who reside outside the country.
     * @uiName W-8 BEN tax form description
     * @uiWidget textArea
     */
    this.taxFormDescriptionIndividualParticipant = "Participants residing outside of the US, joining the referral program of a US-based company, need to submit a {documentType} form.";
    /**
     * Displayed at the top of the page to participants representing a business.
     * @uiName W-8 BEN-E tax form description
     * @uiWidget textArea
     */
    this.taxFormDescriptionBusinessEntity = "Participants residing outside of the US working with a US Brand need to submit a {documentType} form.";
    /**
     * This appears inside the Docusign frame.
     * @uiName Docusign session expired messag
     * @uiWidget textArea
     */
    this.docusignExpired = "For your security and privacy, we automatically end your session after 20 minutes of inactivity. Please refresh and re-enter your tax information to continue.";
    /**
     * Remind participants their session will time out after 20 minutes of inactivity.
     * @uiName Docusign timed session message
     * @uiWidget textArea
     */
    this.docusignSessionWarning = "For your security, we automatically end your session when you have not interacted with the form after 20 minutes.";
    /**
     * @uiName Participant type field label
     */
    this.participantType = "Participant type";
    /**
     * An option for the participant type field. Used to determine which W-8 form is required.
     * @uiName Business representative participant type label
     */
    this.businessEntity = "I represent a business";
    /**
     * An option for the participant type field. Used to determine which W-8 form is required.
     * @uiName Individual participant type label
     */
    this.individualParticipant = "I am an individual participant";
    /**
     * This appears inside the Docusign frame.
     * @uiName Docusign form error message
     * @uiWidget textArea
     */
    this.docusignError = "There was a problem displaying this form. Please refresh the page. If this problem continues, contact our {supportLink}.";
    /**
     * @uiName Refresh page button label
     */
    this.refreshButton = "Refresh Page";
    /**
     * Part of the alert displayed at the top of the page.
     * @uiName Form submission error message title
     * @uiWidget textArea
     */
    this.generalErrorTitle = "There was a problem submitting your information";
    /**
     * Part of the alert displayed at the top of the page.
     * @uiName Form submission error message description
     * @uiWidget textArea
     */
    this.generalErrorDescription = "Please review your information and try again. If this problem continues, contact our {supportLink}.";
    /**
     * Part of the alert displayed at the top of the page.
     * @uiName Page load error message title
     * @uiWidget textArea
     */
    this.loadingErrorAlertHeader = "There was a problem loading your form";
    /**
     * Part of the alert displayed at the top of the page.
     * @uiName Page load error message description
     * @uiWidget textArea
     */
    this.loadingErrorAlertDescription = "Please refresh the page and try again. If this problem continues, contact our {supportLink}.";
    /**
     * Displayed at the top of the page on all set up steps.
     * @uiName Page description
     */
    this.taxAndPayoutsDescription = "Submit your tax documents and add your banking information to receive your rewards.";
    /**
     * Exit button text displayed at the end of the Comply Exchange form flow
     * @uiName Exit button text
     */
    this.exitButton = "Exit";
    /**
     * @uiName Information modal title
     */
    this.modalTitle = "Important Note";
    /**
     * @uiName Information modal description text
     */
    this.modalDescription = "Remember the name you enter in your tax form. It must exactly match the bank account holder name configured in the next step. {br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.";
    /**
     * @uiName Information modal button text
     */
    this.modalButtonText = "I understand";
    withHooks(this);
  }
  disconnectedCallback() { }
  getTextProps() {
    const props = getProps(this);
    return {
      ...props,
      error: {
        generalTitle: props.generalErrorTitle,
        generalDescription: props.generalErrorDescription,
        participantType: props.participantType,
        loadingErrorAlertHeader: props.loadingErrorAlertHeader,
        loadingErrorAlertDescription: props.loadingErrorAlertDescription,
      },
    };
  }
  render() {
    const _isDemo = isDemo();
    const props = _isDemo ? useDocusignFormDemo(this) : useDocusignForm(this);
    const docusignIframeSlot = (h(DocusignIframe, { states: {
        status: props.states.docusignStatus,
        loading: props.states.loading,
        urlLoading: props.states.urlLoading,
      }, data: {
        documentUrl: props.data.documentUrl,
      }, callbacks: {
        completeDocument: props.callbacks.completeDocument,
      }, text: props.text }));
    return (h(Host, null,
      h(DocusignFormView, { callbacks: props.callbacks, states: props.states, text: props.text, slots: {
          docusignIframeSlot: _isDemo
            ? DemoDocusignIframe({ callbacks: props.callbacks })
            : docusignIframeSlot,
        } })));
  }
  static get is() { return "sqm-docusign-form"; }
  static get properties() { return {
    "formStep": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Setup progress",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "form-step",
      "reflect": false,
      "defaultValue": "\"Step {step} of {count}\""
    },
    "taxForm": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Step 3 title",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "tax-form",
      "reflect": false,
      "defaultValue": "\"Tax form\""
    },
    "taxFormLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Tax form name",
            "name": "uiName"
          }],
        "text": "Display the type of tax form that the participant must submit."
      },
      "attribute": "tax-form-label",
      "reflect": false,
      "defaultValue": "\"{documentType} Tax Form\""
    },
    "taxFormDescription": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "W-9 tax form description",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Displayed at the top of the page to participants based in the US."
      },
      "attribute": "tax-form-description",
      "reflect": false,
      "defaultValue": "\"Participants based in the US need to submit a {documentType} form.\""
    },
    "supportLink": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Support link text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "support-link",
      "reflect": false,
      "defaultValue": "\"support team\""
    },
    "taxFormDescriptionIndividualParticipant": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "W-8 BEN tax form description",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Displayed at the top of the page to individuals joining a US program who reside outside the country."
      },
      "attribute": "tax-form-description-individual-participant",
      "reflect": false,
      "defaultValue": "\"Participants residing outside of the US, joining the referral program of a US-based company, need to submit a {documentType} form.\""
    },
    "taxFormDescriptionBusinessEntity": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "W-8 BEN-E tax form description",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Displayed at the top of the page to participants representing a business."
      },
      "attribute": "tax-form-description-business-entity",
      "reflect": false,
      "defaultValue": "\"Participants residing outside of the US working with a US Brand need to submit a {documentType} form.\""
    },
    "docusignExpired": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Docusign session expired messag",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "This appears inside the Docusign frame."
      },
      "attribute": "docusign-expired",
      "reflect": false,
      "defaultValue": "\"For your security and privacy, we automatically end your session after 20 minutes of inactivity. Please refresh and re-enter your tax information to continue.\""
    },
    "docusignSessionWarning": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Docusign timed session message",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Remind participants their session will time out after 20 minutes of inactivity."
      },
      "attribute": "docusign-session-warning",
      "reflect": false,
      "defaultValue": "\"For your security, we automatically end your session when you have not interacted with the form after 20 minutes.\""
    },
    "participantType": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Participant type field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "participant-type",
      "reflect": false,
      "defaultValue": "\"Participant type\""
    },
    "businessEntity": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Business representative participant type label",
            "name": "uiName"
          }],
        "text": "An option for the participant type field. Used to determine which W-8 form is required."
      },
      "attribute": "business-entity",
      "reflect": false,
      "defaultValue": "\"I represent a business\""
    },
    "individualParticipant": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Individual participant type label",
            "name": "uiName"
          }],
        "text": "An option for the participant type field. Used to determine which W-8 form is required."
      },
      "attribute": "individual-participant",
      "reflect": false,
      "defaultValue": "\"I am an individual participant\""
    },
    "docusignError": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Docusign form error message",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "This appears inside the Docusign frame."
      },
      "attribute": "docusign-error",
      "reflect": false,
      "defaultValue": "\"There was a problem displaying this form. Please refresh the page. If this problem continues, contact our {supportLink}.\""
    },
    "refreshButton": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Refresh page button label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "refresh-button",
      "reflect": false,
      "defaultValue": "\"Refresh Page\""
    },
    "generalErrorTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Form submission error message title",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Part of the alert displayed at the top of the page."
      },
      "attribute": "general-error-title",
      "reflect": false,
      "defaultValue": "\"There was a problem submitting your information\""
    },
    "generalErrorDescription": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Form submission error message description",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Part of the alert displayed at the top of the page."
      },
      "attribute": "general-error-description",
      "reflect": false,
      "defaultValue": "\"Please review your information and try again. If this problem continues, contact our {supportLink}.\""
    },
    "loadingErrorAlertHeader": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Page load error message title",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Part of the alert displayed at the top of the page."
      },
      "attribute": "loading-error-alert-header",
      "reflect": false,
      "defaultValue": "\"There was a problem loading your form\""
    },
    "loadingErrorAlertDescription": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Page load error message description",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Part of the alert displayed at the top of the page."
      },
      "attribute": "loading-error-alert-description",
      "reflect": false,
      "defaultValue": "\"Please refresh the page and try again. If this problem continues, contact our {supportLink}.\""
    },
    "taxAndPayoutsDescription": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Page description",
            "name": "uiName"
          }],
        "text": "Displayed at the top of the page on all set up steps."
      },
      "attribute": "tax-and-payouts-description",
      "reflect": false,
      "defaultValue": "\"Submit your tax documents and add your banking information to receive your rewards.\""
    },
    "exitButton": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Exit button text",
            "name": "uiName"
          }],
        "text": "Exit button text displayed at the end of the Comply Exchange form flow"
      },
      "attribute": "exit-button",
      "reflect": false,
      "defaultValue": "\"Exit\""
    },
    "modalTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Information modal title",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "modal-title",
      "reflect": false,
      "defaultValue": "\"Important Note\""
    },
    "modalDescription": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Information modal description text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "modal-description",
      "reflect": false,
      "defaultValue": "\"Remember the name you enter in your tax form. It must exactly match the bank account holder name configured in the next step. {br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout.\""
    },
    "modalButtonText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Information modal button text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "modal-button-text",
      "reflect": false,
      "defaultValue": "\"I understand\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<UseDocusignFormResult>",
        "resolved": "{ states?: { step: string; hideSteps: boolean; disabled: boolean; participantTypeDisabled: boolean; loading: boolean; urlLoading: boolean; loadingError: boolean; formState: { participantType: ParticipantType; taxFormExpired: boolean; errors: {}; }; docusignStatus: DocusignStatus; documentType: TaxDocumentType; documentTypeString: string; showExitButton: boolean; showModal: boolean; }; data?: { taxForm: TaxDocumentType; documentUrl: string; }; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../../global/demo"
          },
          "UseDocusignFormResult": {
            "location": "import",
            "path": "./useDocusignForm"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
  static get elementRef() { return "el"; }
}
function useDocusignFormDemo(props) {
  const setStep = useSetParent(TAX_CONTEXT_NAMESPACE);
  return deepmerge({
    text: props.getTextProps(),
    states: {
      step: "3",
      disabled: false,
      submitDisabled: false,
      loading: false,
      status: undefined,
      loadingError: false,
      participantTypeDisabled: false,
      formState: {
        completedTaxForm: true,
        taxFormExpired: true,
        errors: {},
      },
      documentType: "W9",
      showModal: false,
    },
    data: {
      taxForm: "W9",
      documentUrl: "https://example.com",
    },
    callbacks: {
      // @ts-expect-error: Demo only props
      demo: {
        onSubmit: () => setStep("/4"),
        onBack: () => setStep("/3"),
        onModalOpen: () => { },
        onModalClose: () => { },
      },
      setParticipantType: (p) => console.log({ p }),
      setDocusignStatus: (status) => console.log(status),
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
const DemoDocusignIframe = ({ callbacks }) => {
  return (h("div", { style: {
      width: "100%",
      height: "600px",
      background: "inherit",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
    } },
    h("div", { style: {
        display: "flex",
        flexDirection: "column",
        gap: "12px",
        alignItems: "center",
      } },
      h("span", null, "Placeholder for docusign iframe"),
      h("div", { style: { display: "flex", gap: "8px" } },
        h("sl-button", { type: "primary", submit: true, exportparts: "base: primarybutton-base", onClick: callbacks.demo.onBack }, "Back to Step 2"),
        h("sl-button", { type: "primary", submit: true, exportparts: "base: primarybutton-base", onClick: callbacks.demo.onSubmit }, "Continue to Step 4")))));
};
