import { isDemo, navigation } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop, State } from "@stencil/core";
import deepmerge from "deepmerge";
import { PortalRegisterView, } from "./sqm-portal-register-view";
import { usePortalRegister } from "./usePortalRegister";
/**
 * @uiName Microsite Registration
 * @canvasRenderer always-replace
 * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"}]
 */
export class PortalRegister {
  constructor() {
    this.ignored = false;
    /**
     * Redirect participants to this page from their verification email
     *
     * @uiName Registration redirect
     * @uiWidget pageSelect
     */
    this.nextPage = "/";
    /**
     * The page that participants are redirected to from the verification email.
     *
     * @uiName Email verification redirect
     * @uiWidget pageSelect
     */
    this.redirectPath = "/verifyEmail";
    /**
     * @uiName Email field label
     */
    this.emailLabel = "Email";
    /**
     * @uiName Password field label
     */
    this.passwordLabel = "Password";
    /**
     * @uiName Submit button text
     */
    this.submitLabel = "Register";
    /**
     * @uiName Login button text
     */
    this.loginLabel = "Sign in";
    /**
     * @uiName Confirm password field label
     */
    this.confirmPasswordLabel = "Confirm Password";
    /**
     * @uiName Show confirm password field
     */
    this.confirmPassword = false;
    /**
     * @uiName Disable password validation
     */
    this.disablePasswordValidation = false;
    /**
     * Hides the email and password fields. Note: If you hide default inputs, you must add additional input fields. They must have the input name attributes "email" and "password" for this form to succeed.
     *
     * @uiName Hide default fields
     */
    this.hideInputs = false;
    /**
     * @uiName Header text
     */
    this.pageLabel = "Register";
    /**
     * Redirect participants to this page after clicking the login button.
     *
     * @uiName Login redirect
     * @uiWidget pageSelect
     */
    this.loginPath = "/login";
    /**
     * The message to be displayed when a required field is not filled.
     *
     * @uiName Required field message
     * @uiWidget textArea
     */
    this.requiredFieldErrorMessage = "Cannot be empty";
    /**
     * The message to be displayed when a the form submission fails unexpectedly.
     *
     * @uiName Network error message
     * @uiWidget textArea
     */
    this.networkErrorMessage = "Network request failed.";
    /**
     * The message to be displayed when password inputs do not match.
     *
     * @uiName Password mismatch message
     * @uiWidget textArea
     */
    this.passwordMismatchErrorMessage = "Passwords do not match.";
    /**
     * The message to be displayed when the email used is invalid or blocked.
     *
     * @uiName Invalid email message
     * @uiWidget textArea
     */
    this.invalidEmailErrorMessage = "Must be a valid email address";
    /**
     * @uiName Password requirement met
     */
    this.meetsRequirementsText = "Password has met all requirements";
    /**
     * @uiName Password requirement failed
     */
    this.doesNotMeetRequirementsText = "Password must meet the following requirements:";
    /**
     * @uiName Minimum length text
     */
    this.minErrorText = "be a minimum of 8 characters";
    /**
     * @uiName Missing uppercase text
     */
    this.uppercaseErrorText = "contain at least 1 uppercase character";
    /**
     * @uiName Missing lowercase text
     */
    this.lowercaseErrorText = "contain at least 1 lowercase character";
    /**
     * @uiName Missing number or symbol text
     */
    this.hasErrorText = "contain at least 1 number or symbol";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const { states, callbacks, refs } = isDemo()
      ? useRegisterDemo(this)
      : usePortalRegister(this);
    const content = {
      formData: h("slot", { name: "formData" }),
      secondaryButton: (h("slot", { name: "secondaryButton" },
        h("sl-button", { type: "text", disabled: states.loading, onClick: () => navigation.push(states.loginPath) }, this.loginLabel))),
      terms: h("slot", { name: "terms" }),
      emailLabel: this.emailLabel,
      passwordLabel: this.passwordLabel,
      submitLabel: this.submitLabel,
      pageLabel: this.pageLabel,
      confirmPasswordLabel: this.confirmPasswordLabel,
      invalidEmailErrorMessage: this.invalidEmailErrorMessage,
      requiredFieldErrorMessage: this.requiredFieldErrorMessage,
      meetsRequirementsText: this.meetsRequirementsText,
      doesNotMeetRequirementsText: this.doesNotMeetRequirementsText,
      minErrorText: this.minErrorText,
      uppercaseErrorText: this.uppercaseErrorText,
      lowercaseErrorText: this.lowercaseErrorText,
      hasErrorText: this.hasErrorText,
    };
    return (h(PortalRegisterView, { states: states, callbacks: callbacks, content: content, refs: refs }));
  }
  static get is() { return "sqm-portal-register"; }
  static get properties() { return {
    "nextPage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Registration redirect",
            "name": "uiName"
          }, {
            "text": "pageSelect",
            "name": "uiWidget"
          }],
        "text": "Redirect participants to this page from their verification email"
      },
      "attribute": "next-page",
      "reflect": false,
      "defaultValue": "\"/\""
    },
    "redirectPath": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Email verification redirect",
            "name": "uiName"
          }, {
            "text": "pageSelect",
            "name": "uiWidget"
          }],
        "text": "The page that participants are redirected to from the verification email."
      },
      "attribute": "redirect-path",
      "reflect": false,
      "defaultValue": "\"/verifyEmail\""
    },
    "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\""
    },
    "passwordLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Password field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "password-label",
      "reflect": false,
      "defaultValue": "\"Password\""
    },
    "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": "\"Register\""
    },
    "loginLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Login button text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "login-label",
      "reflect": false,
      "defaultValue": "\"Sign in\""
    },
    "confirmPasswordLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Confirm password field label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "confirm-password-label",
      "reflect": false,
      "defaultValue": "\"Confirm Password\""
    },
    "confirmPassword": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Show confirm password field",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "confirm-password",
      "reflect": false,
      "defaultValue": "false"
    },
    "disablePasswordValidation": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Disable password validation",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "disable-password-validation",
      "reflect": false,
      "defaultValue": "false"
    },
    "hideInputs": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Hide default fields",
            "name": "uiName"
          }],
        "text": "Hides the email and password fields. Note: If you hide default inputs, you must add additional input fields. They must have the input name attributes \"email\" and \"password\" for this form to succeed."
      },
      "attribute": "hide-inputs",
      "reflect": false,
      "defaultValue": "false"
    },
    "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": "\"Register\""
    },
    "loginPath": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Login redirect",
            "name": "uiName"
          }, {
            "text": "pageSelect",
            "name": "uiWidget"
          }],
        "text": "Redirect participants to this page after clicking the login button."
      },
      "attribute": "login-path",
      "reflect": false,
      "defaultValue": "\"/login\""
    },
    "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 when a required field is not filled."
      },
      "attribute": "required-field-error-message",
      "reflect": false,
      "defaultValue": "\"Cannot be empty\""
    },
    "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 when a the form submission fails unexpectedly."
      },
      "attribute": "network-error-message",
      "reflect": false,
      "defaultValue": "\"Network request failed.\""
    },
    "passwordMismatchErrorMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Password mismatch message",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "The message to be displayed when password inputs do not match."
      },
      "attribute": "password-mismatch-error-message",
      "reflect": false,
      "defaultValue": "\"Passwords do not match.\""
    },
    "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 when the email used is invalid or blocked."
      },
      "attribute": "invalid-email-error-message",
      "reflect": false,
      "defaultValue": "\"Must be a valid email address\""
    },
    "meetsRequirementsText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Password requirement met",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "meets-requirements-text",
      "reflect": false,
      "defaultValue": "\"Password has met all requirements\""
    },
    "doesNotMeetRequirementsText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Password requirement failed",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "does-not-meet-requirements-text",
      "reflect": false,
      "defaultValue": "\"Password must meet the following requirements:\""
    },
    "minErrorText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Minimum length text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "min-error-text",
      "reflect": false,
      "defaultValue": "\"be a minimum of 8 characters\""
    },
    "uppercaseErrorText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Missing uppercase text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "uppercase-error-text",
      "reflect": false,
      "defaultValue": "\"contain at least 1 uppercase character\""
    },
    "lowercaseErrorText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Missing lowercase text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "lowercase-error-text",
      "reflect": false,
      "defaultValue": "\"contain at least 1 lowercase character\""
    },
    "hasErrorText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Missing number or symbol text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "has-error-text",
      "reflect": false,
      "defaultValue": "\"contain at least 1 number or symbol\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<PortalRegisterViewProps>",
        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; registrationFormState: RegistrationFormState; disablePasswordValidation?: boolean; loginPath: string; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel: string; requiredFieldErrorMessage: string; invalidEmailErrorMessage: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "PortalRegisterViewProps": {
            "location": "import",
            "path": "./sqm-portal-register-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,
      confirmPassword: props.confirmPassword,
      hideInputs: props.hideInputs || false,
      customPasswordField: false,
      loginPath: props.loginPath,
      disablePasswordValidation: props.disablePasswordValidation,
    },
    callbacks: {
      submit: async (_event) => {
        console.log("submit");
      },
      inputFunction: () => { },
    },
    refs: {
      formRef: {},
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
