import { isDemo, navigation } from "@saasquatch/component-boilerplate";
import { useState, withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop, State } from "@stencil/core";
import deepmerge from "deepmerge";
import { createStyleSheet } from "../../styling/JSS";
import { BaseRegistrationFormView } from "../sqm-base-registration/sqm-base-registration-form-view";
import { PortalRegistrationFormView, } from "../sqm-portal-registration-form/sqm-portal-registration-form-view";
import { usePortalRegistrationForm } from "../sqm-portal-registration-form/usePortalRegistrationForm";
import { usePortalGoogleRegistrationForm } from "./usePortalGoogleRegistrationForm";
/**
 * @uiName Google Registration
 * @canvasRenderer always-replace
 * @slots [{"name":"formData","title":"Additional Fields"},{"name":"terms","title":"Terms And Conditions Fields"}]
 */
export class PortalGoogleRegistrationForm {
  constructor() {
    this.ignored = true;
    /**
     * Redirect participants to this page after they successfully register.
     *
     * @uiName Registration redirect
     * @uiWidget pageSelect
     */
    this.nextPage = "/";
    /**
     * Redirect participants to this page from their 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";
    /**
     * Login Call-to-action
     *
     * @uiName Login CTA
     */
    this.loginCTA = "Already have an account?";
    /**
     * 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";
    /**
     * The message to be displayed when the registration form is disabled.
     *
     * @uiName Form disabled message
     * @uiWidget textArea
     */
    this.formDisabledErrorMessage = "The registration form is currently disabled.";
    /**
     * @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";
    /**
     * Can be "signup_with", "signin_with", "continue_with", or "signin"
     *
     * @uiName Google button text
     */
    this.googleButtonText = "signup_with";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const { states, callbacks, refs } = isDemo()
      ? useRegisterDemo(this)
      : usePortalRegistrationForm(this);
    const styles = {
      LoginButton: {
        "&::part(label)": {
          padding: "0",
        },
      },
    };
    const sheet = createStyleSheet(styles);
    const styleString = sheet.toString();
    const { handleGoogleInit, handleEmailSubmit, showRegistrationForm, validationErrors, } = isDemo() ? useGoogleDemo(this) : usePortalGoogleRegistrationForm(this);
    const content = {
      formData: h("slot", { name: "formData" }),
      googleButton: (h("sqm-google-sign-in", { text: this.googleButtonText, onInitComplete: handleGoogleInit })),
      secondaryButton: (h("slot", { name: "secondaryButton" },
        h("style", null, styleString),
        h("span", null,
          this.loginCTA,
          " ",
          h("sl-button", { size: "large", type: "text", disabled: states.loading, onClick: () => navigation.push(states.loginPath), className: sheet.classes.LoginButton }, this.loginLabel),
          " "))),
      terms: h("slot", { name: "terms" }),
      emailLabel: this.emailLabel,
      passwordLabel: this.passwordLabel,
      submitLabel: this.submitLabel,
      pageLabel: this.pageLabel,
      confirmPasswordLabel: this.confirmPasswordLabel,
      networkErrorMessage: this.networkErrorMessage,
      passwordMismatchErrorMessage: this.passwordMismatchErrorMessage,
      invalidEmailErrorMessage: this.invalidEmailErrorMessage,
      formDisabledErrorMessage: this.formDisabledErrorMessage,
      requiredFieldErrorMessage: this.requiredFieldErrorMessage,
      meetsRequirementsText: this.meetsRequirementsText,
      doesNotMeetRequirementsText: this.doesNotMeetRequirementsText,
      minErrorText: this.minErrorText,
      uppercaseErrorText: this.uppercaseErrorText,
      lowercaseErrorText: this.lowercaseErrorText,
      hasErrorText: this.hasErrorText,
    };
    if (showRegistrationForm.mode === "base") {
      return (h(BaseRegistrationFormView, { states: {
          validationErrors,
        }, callbacks: { handleEmailSubmit }, content: content }));
    }
    return (h(PortalRegistrationFormView, { states: {
        ...states,
        emailDisabled: true,
        hidePasswords: showRegistrationForm.mode === "google",
      }, callbacks: callbacks, content: content, refs: refs }));
  }
  static get is() { return "sqm-portal-google-registration-form"; }
  static get encapsulation() { return "shadow"; }
  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 after they successfully register."
      },
      "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": "Redirect participants to this page from their 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\""
    },
    "loginCTA": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Login CTA",
            "name": "uiName"
          }],
        "text": "Login Call-to-action"
      },
      "attribute": "login-c-t-a",
      "reflect": false,
      "defaultValue": "\"Already have an account?\""
    },
    "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\""
    },
    "formDisabledErrorMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Form disabled message",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "The message to be displayed when the registration form is disabled."
      },
      "attribute": "form-disabled-error-message",
      "reflect": false,
      "defaultValue": "\"The registration form is currently disabled.\""
    },
    "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\""
    },
    "formKey": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Form key",
            "name": "uiName"
          }, {
            "text": undefined,
            "name": "required"
          }],
        "text": "The key of the registration form used for this microsite."
      },
      "attribute": "form-key",
      "reflect": false
    },
    "googleButtonText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Google button text",
            "name": "uiName"
          }],
        "text": "Can be \"signup_with\", \"signin_with\", \"continue_with\", or \"signin\""
      },
      "attribute": "google-button-text",
      "reflect": false,
      "defaultValue": "\"signup_with\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<PortalRegistrationFormViewProps>",
        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; hidePasswords?: boolean; registrationFormState?: RegistrationFormState; enablePasswordValidation?: boolean; loginPath: string; emailDisabled?: boolean; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; emailOptIn?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel?: string; networkErrorMessage?: string; passwordMismatchErrorMessage?: string; invalidEmailErrorMessage?: string; formDisabledErrorMessage?: string; requiredFieldErrorMessage?: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "PortalRegistrationFormViewProps": {
            "location": "import",
            "path": "../sqm-portal-registration-form/sqm-portal-registration-form-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    },
    "demoGoogleData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<PortalRegistrationFormViewProps>",
        "resolved": "{ states?: { error: string; loading: boolean; confirmPassword: boolean; hideInputs: boolean; hidePasswords?: boolean; registrationFormState?: RegistrationFormState; enablePasswordValidation?: boolean; loginPath: string; emailDisabled?: boolean; }; refs?: { formRef: any; }; content?: { formData?: VNode; terms?: VNode; emailOptIn?: VNode; passwordField?: VNode; secondaryButton?: VNode; emailLabel?: string; passwordLabel?: string; submitLabel?: string; pageLabel?: string; confirmPasswordLabel?: string; networkErrorMessage?: string; passwordMismatchErrorMessage?: string; invalidEmailErrorMessage?: string; formDisabledErrorMessage?: string; requiredFieldErrorMessage?: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "PortalRegistrationFormViewProps": {
            "location": "import",
            "path": "../sqm-portal-registration-form/sqm-portal-registration-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,
      confirmPassword: props.confirmPassword,
      hideInputs: props.hideInputs || false,
      customPasswordField: false,
      loginPath: "/login",
    },
    callbacks: {
      handleGoogleInit: () => { },
      setShowRegistrationForm: () => { },
      submit: async (_event) => {
        console.log("submit");
      },
      inputFunction: () => { },
    },
    content: {
      pageLabel: "Register",
      formData: null,
      passwordField: null,
    },
    refs: {
      formRef: {},
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
function useGoogleDemo(props) {
  const [showRegistrationForm, setShowRegistrationForm] = useState({
    mode: "base",
  });
  return deepmerge({
    validationErrors: {},
    handleEmailSubmit: () => setShowRegistrationForm({ mode: "manual" }),
    showRegistrationForm,
    handleGoogleInit: () => setShowRegistrationForm({ mode: "google" }),
  }, props.demoGoogleData || {}, { arrayMerge: (_, a) => a });
}
