import { isDemo, setUserIdentity } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, Prop, State, h } from "@stencil/core";
import deepmerge from "deepmerge";
import { EmailRegistrationView, } from "../views/email-registration-view";
import { useInstantAccessRegistration } from "./useInstantAccessRegistration";
/**
 * @uiName Instant Access Registration
 * @validParents ["sqm-portal-container","div","sqm-hero","template", "sqb-program-section", "sqb-conditional-section"]
 * @compatibility Built for instant access
 * @exampleGroup Instant Access
 * @example Advocate Registration - <sqm-instant-access-registration></sqm-instant-access-registration>
 * @slots [{"name":"top","title":"Top Content"},{"name":"bottom","title":"Bottom Content"}]
 */
export class InstantAccessRegistration {
  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 Register button text
     */
    this.registerLabel = "Start Referring";
    /**
     * Require your participants to enter their first and last name.
     *
     * @uiName Include name fields
     */
    this.includeName = false;
    /**
     * @uiName Hide border
     * @uiGroup Card style
     */
    this.hideBorder = false;
    /**
     * Display this message when a required field has not been filled out.
     *
     * @uiName Required field message
     * @uiWidget textArea
     * @uiGroup Error messages
     */
    this.requiredFieldErrorMessage = "Cannot be empty";
    /**
     * Display this message when the given email is invalid.
     *
     * @uiName Invalid email message
     * @uiWidget textArea
     * @uiGroup Error messages
     */
    this.invalidEmailErrorMessage = "Please enter a valid email address";
    /**
     * Display this message when the form submission unexpectedly fails.
     *
     * @uiName Network error message
     * @uiWidget textArea
     * @uiGroup Error messages
     */
    this.networkErrorMessage = "There was a problem signing you in. Please wait a moment and try again. If this problem continues, contact Support for help resolving this issue.";
    /**
     * @uiName Top padding
     * @uiGroup Card style
     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
     */
    this.paddingTop = "large";
    /**
     * @uiName Right padding
     * @uiGroup Card style
     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
     */
    this.paddingRight = "large";
    /**
     * @uiName Bottom padding
     * @uiGroup Card style
     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
     */
    this.paddingBottom = "large";
    /**
     * @uiName Left padding
     * @uiGroup Card style
     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
     */
    this.paddingLeft = "large";
    /**
     * @uiName Background color
     * @uiWidget color
     * @uiGroup Card style
     * @uiType string
     */
    this.backgroundColor = "var(--sqm-portal-background)";
    /**
     * @undocumented
     * @uiType boolean
     */
    this.includeCookies = false;
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const { states, callbacks } = isDemo()
      ? useRegistrationDemo(this)
      : useInstantAccessRegistration(this);
    const content = {
      emailLabel: this.emailLabel,
      registerLabel: this.registerLabel,
      firstNameLabel: this.firstNameLabel,
      lastNameLabel: this.lastNameLabel,
      includeName: this.includeName,
      hideBorder: this.hideBorder,
      invalidEmailErrorMessage: this.invalidEmailErrorMessage,
      requiredFieldErrorMessage: this.requiredFieldErrorMessage,
      paddingTop: this.paddingTop,
      paddingBottom: this.paddingBottom,
      paddingLeft: this.paddingLeft,
      paddingRight: this.paddingRight,
      backgroundColor: this.backgroundColor,
      // slots
      topSlot: h("slot", { name: "top" }),
      bottomSlot: h("slot", { name: "bottom" }),
    };
    return (h(EmailRegistrationView, { states: states, callbacks: callbacks, content: content }));
  }
  static get is() { return "sqm-instant-access-registration"; }
  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\""
    },
    "registerLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Register button text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "register-label",
      "reflect": false,
      "defaultValue": "\"Start Referring\""
    },
    "includeName": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Include name fields",
            "name": "uiName"
          }],
        "text": "Require your participants to enter their first and last name."
      },
      "attribute": "include-name",
      "reflect": false,
      "defaultValue": "false"
    },
    "hideBorder": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Hide border",
            "name": "uiName"
          }, {
            "text": "Card style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "hide-border",
      "reflect": false,
      "defaultValue": "false"
    },
    "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": "Error messages",
            "name": "uiGroup"
          }],
        "text": "Display this message when a required field has not been filled out."
      },
      "attribute": "required-field-error-message",
      "reflect": false,
      "defaultValue": "\"Cannot be empty\""
    },
    "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": "Error messages",
            "name": "uiGroup"
          }],
        "text": "Display this message when the given email is invalid."
      },
      "attribute": "invalid-email-error-message",
      "reflect": false,
      "defaultValue": "\"Please enter a valid email address\""
    },
    "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": "Error messages",
            "name": "uiGroup"
          }],
        "text": "Display this message when the form submission unexpectedly fails."
      },
      "attribute": "network-error-message",
      "reflect": false,
      "defaultValue": "\"There was a problem signing you in. Please wait a moment and try again. If this problem continues, contact Support for help resolving this issue.\""
    },
    "paddingTop": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Top padding",
            "name": "uiName"
          }, {
            "text": "Card style",
            "name": "uiGroup"
          }, {
            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "padding-top",
      "reflect": false,
      "defaultValue": "\"large\""
    },
    "paddingRight": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Right padding",
            "name": "uiName"
          }, {
            "text": "Card style",
            "name": "uiGroup"
          }, {
            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "padding-right",
      "reflect": false,
      "defaultValue": "\"large\""
    },
    "paddingBottom": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Bottom padding",
            "name": "uiName"
          }, {
            "text": "Card style",
            "name": "uiGroup"
          }, {
            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "padding-bottom",
      "reflect": false,
      "defaultValue": "\"large\""
    },
    "paddingLeft": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Left padding",
            "name": "uiName"
          }, {
            "text": "Card style",
            "name": "uiGroup"
          }, {
            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "padding-left",
      "reflect": false,
      "defaultValue": "\"large\""
    },
    "backgroundColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Background color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "Card style",
            "name": "uiGroup"
          }, {
            "text": "string",
            "name": "uiType"
          }],
        "text": ""
      },
      "attribute": "background-color",
      "reflect": false,
      "defaultValue": "\"var(--sqm-portal-background)\""
    },
    "includeCookies": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "boolean",
            "name": "uiType"
          }],
        "text": ""
      },
      "attribute": "include-cookies",
      "reflect": false,
      "defaultValue": "false"
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<EmailRegistrationViewProps>",
        "resolved": "{ states?: { error: string; loading: boolean; registrationFormState?: RegistrationFormState; }; content?: { hideBorder?: boolean; fraudErrorMessage?: string; fraudErrorMessageTitle?: string; emailLabel?: string; firstNameLabel?: string; lastNameLabel?: string; registerLabel?: string; includeName?: boolean; topSlot?: VNode; bottomSlot?: VNode; invalidEmailErrorMessage: string; requiredFieldErrorMessage: string; paddingTop?: string; paddingRight?: string; paddingBottom?: string; paddingLeft?: string; backgroundColor?: string; }; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "EmailRegistrationViewProps": {
            "location": "import",
            "path": "../views/email-registration-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
function useRegistrationDemo(props) {
  const submit = async (_event) => {
    setUserIdentity({
      id: "referrer@example.com",
      accountId: "referrer@example.com",
      jwt: "eyJraWQiOiJlNjI2NzQxNy1jMzZlLTRlM2EtYjM5NS1lYTFmY2YyNmU3YzIiLCJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJjbVZtWlhKeVpYSkFaWGhoYlhCc1pTNWpiMjA9OmNtVm1aWEp5WlhKQVpYaGhiWEJzWlM1amIyMD1AdGVzdF9heGJndGF0dzF0Y2NwOnVzZXJzIiwicGFzc3dvcmRsZXNzIjp0cnVlLCJpc3MiOiJodHRwczovL3N0YWdpbmcucmVmZXJyYWxzYWFzcXVhdGNoLmNvbS8iLCJleHAiOjE2ODA4ODU5MTksImlhdCI6MTY4MDc5OTUxOX0.kjmTVVf_BTb-uMNKnadLyNLxMFwpkefsY02O3iAfBVIJJZZfeZMwunPlKsS3Vbp28aYRClBjH5Wj4pYxDn23D0CdZx8KNCqiJ8yF6149O9SPMkRseoJkliqS6LyvMOEDjGDkuLfcC8_hq1AHBXFt5BdCtWOk1gwf_5R9A0w5gXEIvprBzbNDLbuo88bVAlrmFNvfttXXryrpUeruMal7cBKuy02YblBrB4kKoyJiprU5GLEjciBA4A56u8TwQc0kbsPf2YcQaJsY_IvkC7S1u4sPyObpq6iF6Ed8UYHAo6nU5KjZXyVtoUyeIS11mf_6OtDO6LyMNHV2FtEUUDdPCg",
    });
  };
  return deepmerge({
    states: {
      loading: false,
      error: "",
    },
    callbacks: {
      submit,
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
