import { isDemo } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop, State } from "@stencil/core";
import deepmerge from "deepmerge";
import { LeadFormView } from "./sqm-lead-form-view";
import { useLeadForm } from "./useLeadForm";
/**
 * @uiName Lead Form
 * @canvasRenderer always-replace
 * @slots [{"name":"formData","title":"Additional Fields"}]
 */
export class LeadForm {
  constructor() {
    this.ignored = true;
    /**
     * @uiName Email field label
     */
    this.emailLabel = "Email";
    /**
     * @uiName First Name field label
     */
    this.firstNameLabel = "First name";
    /**
     * @uiName Last Name field label
     */
    this.lastNameLabel = "Last name";
    /**
     * @uiName Submit button text
     */
    this.submitLabel = "Submit";
    /**
     * @uiName Submit another form button label
     */
    this.resubmitFormLabel = "Refer Another Friend";
    /**
     * @uiName Header text
     */
    this.pageLabel = "Refer your friend";
    /**
     * Key of the form to connect to. Create and manage forms in the /advocate dashboard under Data > Forms.
     * @uiName Form key
     */
    this.formKey = "lead-form";
    /**
     * Optional support link text for error messages.
     * @uiName Support link text
     */
    this.supportLinkText = "Support";
    /**
     * Header text shown on successful lead submission.
     * @uiName Submit success header
     */
    this.submitSuccessHeader = "Lead submitted";
    /**
     * Description text shown on successful lead submission.
     * @uiName Submit success description
     */
    this.submitSuccessDescription = "Our team will contact your friend to see if they’re a good fit. In the meantime, you can track this referral on Activity page.";
    /**
     *  Header text shown if an error occurs.
     * @uiName Submit error header
     */
    this.submitErrorHeader = "An error occurred while submitting";
    /**
     * Description text shown if an error occurs.
     * @uiName Submit error description
     */
    this.submitErrorDescription = "Please try again later. If the problem continues, contact {supportLink}";
    /**
     * The message to be displayed if a required field is not filled.
     *
     * @uiName Required field message
     * @uiWidget textArea
     */
    this.requiredFieldErrorMessage = "Please enter a valid {fieldLabel}";
    /**
     * The message to be displayed if a the form submission fails unexpectedly.
     *
     * @uiName Network error message
     * @uiWidget textArea
     */
    this.networkErrorMessage = "Network request failed.";
    /**
     * The message to be displayed if the email used is invalid.
     *
     * @uiName Invalid email message
     * @uiWidget textArea
     */
    this.invalidEmailErrorMessage = "Must be a valid email address";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const { states, callbacks, refs } = isDemo()
      ? useRegisterDemo(this)
      : useLeadForm(this);
    const content = {
      formData: h("slot", { name: "formData" }),
      emailLabel: this.emailLabel,
      submitLabel: this.submitLabel,
      resubmitFormLabel: this.resubmitFormLabel,
      pageLabel: this.pageLabel,
      supportLinkText: this.supportLinkText,
      submitSuccessHeader: this.submitSuccessHeader,
      submitSuccessDescription: this.submitSuccessDescription,
      submitErrorHeader: this.submitErrorHeader,
      submitErrorDescription: this.submitErrorDescription,
      invalidEmailErrorMessage: this.invalidEmailErrorMessage,
      requiredFieldErrorMessage: this.requiredFieldErrorMessage,
      firstNameLabel: this.firstNameLabel,
      lastNameLabel: this.lastNameLabel,
    };
    return (h(LeadFormView, { states: states, callbacks: callbacks, content: content, refs: refs }));
  }
  static get is() { return "sqm-lead-form"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "emailLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Email field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "email-label",
      "reflect": false,
      "defaultValue": "\"Email\""
    },
    "firstNameLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "First Name field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "first-name-label",
      "reflect": false,
      "defaultValue": "\"First name\""
    },
    "lastNameLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Last Name field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "last-name-label",
      "reflect": false,
      "defaultValue": "\"Last name\""
    },
    "submitLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Submit button text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "submit-label",
      "reflect": false,
      "defaultValue": "\"Submit\""
    },
    "resubmitFormLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Submit another form button label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "resubmit-form-label",
      "reflect": false,
      "defaultValue": "\"Refer Another Friend\""
    },
    "pageLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Header text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "page-label",
      "reflect": false,
      "defaultValue": "\"Refer your friend\""
    },
    "formKey": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Form key",
            "name": "uiName"
          }],
        "text": "Key of the form to connect to. Create and manage forms in the /advocate dashboard under Data > Forms."
      },
      "attribute": "form-key",
      "reflect": false,
      "defaultValue": "\"lead-form\""
    },
    "supportLinkText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Support link text",
            "name": "uiName"
          }],
        "text": "Optional support link text for error messages."
      },
      "attribute": "support-link-text",
      "reflect": false,
      "defaultValue": "\"Support\""
    },
    "submitSuccessHeader": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Submit success header",
            "name": "uiName"
          }],
        "text": "Header text shown on successful lead submission."
      },
      "attribute": "submit-success-header",
      "reflect": false,
      "defaultValue": "\"Lead submitted\""
    },
    "submitSuccessDescription": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Submit success description",
            "name": "uiName"
          }],
        "text": "Description text shown on successful lead submission."
      },
      "attribute": "submit-success-description",
      "reflect": false,
      "defaultValue": "\"Our team will contact your friend to see if they\u2019re a good fit. In the meantime, you can track this referral on Activity page.\""
    },
    "submitErrorHeader": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Submit error header",
            "name": "uiName"
          }],
        "text": "Header text shown if an error occurs."
      },
      "attribute": "submit-error-header",
      "reflect": false,
      "defaultValue": "\"An error occurred while submitting\""
    },
    "submitErrorDescription": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Submit error description",
            "name": "uiName"
          }],
        "text": "Description text shown if an error occurs."
      },
      "attribute": "submit-error-description",
      "reflect": false,
      "defaultValue": "\"Please try again later. If the problem continues, contact {supportLink}\""
    },
    "requiredFieldErrorMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Required field message",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "The message to be displayed if a required field is not filled."
      },
      "attribute": "required-field-error-message",
      "reflect": false,
      "defaultValue": "\"Please enter a valid {fieldLabel}\""
    },
    "networkErrorMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Network error message",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "The message to be displayed if a the form submission fails unexpectedly."
      },
      "attribute": "network-error-message",
      "reflect": false,
      "defaultValue": "\"Network request failed.\""
    },
    "invalidEmailErrorMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Invalid email message",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "The message to be displayed if the email used is invalid."
      },
      "attribute": "invalid-email-error-message",
      "reflect": false,
      "defaultValue": "\"Must be a valid email address\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<LeadFormViewProps>",
        "resolved": "{ states?: { error: string; success: boolean; loading: boolean; leadFormState: LeadFormState; referralCode: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; emailLabel?: string; firstNameLabel?: string; lastNameLabel?: string; submitLabel?: string; resubmitFormLabel?: string; pageLabel?: string; supportLinkText?: string; submitSuccessHeader?: string; submitSuccessDescription?: string; submitErrorHeader?: string; submitErrorDescription?: string; requiredFieldErrorMessage: string; invalidEmailErrorMessage: string; }; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "LeadFormViewProps": {
            "location": "import",
            "path": "./sqm-lead-form-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
function useRegisterDemo(props) {
  return deepmerge({
    states: {
      error: "",
      loading: false,
      success: false,
    },
    callbacks: {
      submit: async (_event) => {
        console.log("submit");
      },
      inputFunction: () => { },
      resetForm: () => { },
    },
    refs: {
      formRef: {},
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
