import { isDemo, useParentState, useSetParent, } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop } from "@stencil/core";
import deepmerge from "deepmerge";
import { parseStates } from "../../utils/parseStates";
import { getProps } from "../../utils/utils";
import { extractProps } from "../tax-and-cash/sqm-tax-and-cash/extractProps";
import { SHOW_CODE_NAMESPACE, VERIFICATION_EMAIL_NAMESPACE, VERIFICATION_PARENT_NAMESPACE, } from "./keys";
import { useWidgetVerification } from "./useWidgetVerification";
/**
 * @uiName Widget Verification Flow
 * @exampleGroup Widget Verification
 * @example Widget Verification - <sqm-widget-verification></sqm-widget-verification>
 */
export class WidgetVerification {
  constructor() {
    // ! Any updated must be reflected in sqm-widget-verification-internal AND sqm-email-verification AND sqm-code-verification
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                    GENERAL PROPS
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /**
     * @uiName General verify widget header text
     * @uiGroup General Text
     */
    this.general_verifyEmailHeader = "Verify your email";
    /**
     * @uiName General verify widget description text
     * @uiGroup General Text
     */
    this.general_verifyEmailDescription = "To get your cash paid out directly to your bank account, please complete your account setup";
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                    EMAIL STEP PROPS
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /**
     * @uiName Verify email widget header text
     * @uiGroup Email Verification Step
     */
    this.emailStep_verifyEmailHeaderText = "Start by verifying your email. We’ll send you a code through our referral provider, impact.com.";
    /**
     * @uiName Send code to email alert header
     * @uiGroup Email Verification Step
     */
    this.emailStep_sendCodeErrorHeader = "There was an error sending your code.";
    /**
     * @uiName Send code to email alert description
     * @uiGroup Email Verification Step
     */
    this.emailStep_sendCodeErrorDescription = "Please try again. If this problem continues, contact our program support team.";
    /**
     * @uiName Email input label
     * @uiGroup Email Verification Step
     */
    this.emailStep_emailLabel = "Email";
    /**
     * @uiName Send code button text
     * @uiGroup Email Verification Step
     */
    this.emailStep_sendCodeText = "Send code";
    /**
     * @uiName Send code button text
     * @uiGroup Email Verification Step
     */
    this.emailStep_emailValidationErrorText = "Please enter a valid email";
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                    EMAIL STEP PROPS
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /**
     * @uiName Verify code widget header text
     * @uiGroup Code Verification Step
     */
    this.codeStep_verifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
    /**
     * @uiName Reverify code widget header text
     * @uiGroup Code Verification Step
     */
    this.codeStep_reverifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
    /**
     * Text displayed under verify button
     * @uiName Resend code text
     * @uiGroup Code Verification Step
     */
    this.codeStep_resendCodeText = "Didn't receive your code? {resendCodeLink}";
    /**
     * The link that appears in the resend code link
     * @uiName Resend code label
     * @uiGroup Code Verification Step
     */
    this.codeStep_resendCodeLabel = "Resend code";
    /**
     * Link text displayed under verify button
     * @uiName Resend code text
     * @uiGroup Code Verification Step
     */
    this.codeStep_codeResentSuccessfullyText = "Another code has been sent to {email}";
    /**
     * Error text displayed under verification input
     * @uiName Invalid code text
     * @uiGroup Code Verification Step
     */
    this.codeStep_invalidCodeText = "Please check your code and try again. If you’re still having trouble, try resending your code.";
    /**
     * @uiName Verify code button text
     * @uiGroup Code Verification Step
     */
    this.codeStep_verifyText = "Verify";
    /**
     * Displayed when the email verification fails due to a network error. The participant can try refreshing the page.
     * @uiName Network error message
     * @uiGroup Code Verification Step
     */
    this.codeStep_networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
    /**
     * @undocumented
     * @componentState { "title": "Step 1: Enter email", "props": { "showCode": false }, "dependencies": ["sqm-email-verification"], "uiGroup": "Email Verification Step" }
     * @componentState { "title": "Step 2: Enter code", "props": { "showCode": true }, "dependencies": ["sqm-code-verification"], "uiGroup": "Code Verification Step" }
     */
    this.stateController = "{}";
    withHooks(this);
  }
  disconnectedCallback() { }
  getStepTextProps(prefix) {
    const props = getProps(this);
    return extractProps(props, prefix);
  }
  render() {
    const props = isDemo()
      ? useDemoWidgetVerificationInternal(this)
      : useWidgetVerification();
    if (props.loading)
      return h("sl-spinner", null);
    const generalText = this.getStepTextProps("general_");
    return (h("div", null,
      h("h3", { style: { fontSize: "24px", margin: "0" } }, generalText.verifyEmailHeader),
      h("p", { style: {
          color: "var(--sl-color-neutral-500)",
          fontSize: "var(--sl-font-size-medium)",
          margin: "0",
        } }, generalText.verifyEmailDescription),
      props.showCode ? (h("sqm-code-verification", Object.assign({ onVerification: props.onVerification }, this.getStepTextProps("codeStep_"), extractProps(props, "sqm-code-verification_")))) : (h("sqm-email-verification", Object.assign({}, this.getStepTextProps("emailStep_"), extractProps(props, "sqm-email-verification_"))))));
  }
  static get is() { return "sqm-widget-verification"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "general_verifyEmailHeader": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "General verify widget header text",
            "name": "uiName"
          }, {
            "text": "General Text",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "general_verify-email-header",
      "reflect": false,
      "defaultValue": "\"Verify your email\""
    },
    "general_verifyEmailDescription": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "General verify widget description text",
            "name": "uiName"
          }, {
            "text": "General Text",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "general_verify-email-description",
      "reflect": false,
      "defaultValue": "\"To get your cash paid out directly to your bank account, please complete your account setup\""
    },
    "emailStep_verifyEmailHeaderText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Verify email widget header text",
            "name": "uiName"
          }, {
            "text": "Email Verification Step",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "email-step_verify-email-header-text",
      "reflect": false,
      "defaultValue": "\"Start by verifying your email. We\u2019ll send you a code through our referral provider, impact.com.\""
    },
    "emailStep_sendCodeErrorHeader": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Send code to email alert header",
            "name": "uiName"
          }, {
            "text": "Email Verification Step",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "email-step_send-code-error-header",
      "reflect": false,
      "defaultValue": "\"There was an error sending your code.\""
    },
    "emailStep_sendCodeErrorDescription": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Send code to email alert description",
            "name": "uiName"
          }, {
            "text": "Email Verification Step",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "email-step_send-code-error-description",
      "reflect": false,
      "defaultValue": "\"Please try again. If this problem continues, contact our program support team.\""
    },
    "emailStep_emailLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Email input label",
            "name": "uiName"
          }, {
            "text": "Email Verification Step",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "email-step_email-label",
      "reflect": false,
      "defaultValue": "\"Email\""
    },
    "emailStep_sendCodeText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Send code button text",
            "name": "uiName"
          }, {
            "text": "Email Verification Step",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "email-step_send-code-text",
      "reflect": false,
      "defaultValue": "\"Send code\""
    },
    "emailStep_emailValidationErrorText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Send code button text",
            "name": "uiName"
          }, {
            "text": "Email Verification Step",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "email-step_email-validation-error-text",
      "reflect": false,
      "defaultValue": "\"Please enter a valid email\""
    },
    "codeStep_verifyCodeHeaderText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Verify code widget header text",
            "name": "uiName"
          }, {
            "text": "Code Verification Step",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "code-step_verify-code-header-text",
      "reflect": false,
      "defaultValue": "\"Enter the code sent to {email} from our referral provider, impact.com.\""
    },
    "codeStep_reverifyCodeHeaderText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Reverify code widget header text",
            "name": "uiName"
          }, {
            "text": "Code Verification Step",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "code-step_reverify-code-header-text",
      "reflect": false,
      "defaultValue": "\"Enter the code sent to {email} from our referral provider, impact.com.\""
    },
    "codeStep_resendCodeText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Resend code text",
            "name": "uiName"
          }, {
            "text": "Code Verification Step",
            "name": "uiGroup"
          }],
        "text": "Text displayed under verify button"
      },
      "attribute": "code-step_resend-code-text",
      "reflect": false,
      "defaultValue": "\"Didn't receive your code? {resendCodeLink}\""
    },
    "codeStep_resendCodeLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Resend code label",
            "name": "uiName"
          }, {
            "text": "Code Verification Step",
            "name": "uiGroup"
          }],
        "text": "The link that appears in the resend code link"
      },
      "attribute": "code-step_resend-code-label",
      "reflect": false,
      "defaultValue": "\"Resend code\""
    },
    "codeStep_codeResentSuccessfullyText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Resend code text",
            "name": "uiName"
          }, {
            "text": "Code Verification Step",
            "name": "uiGroup"
          }],
        "text": "Link text displayed under verify button"
      },
      "attribute": "code-step_code-resent-successfully-text",
      "reflect": false,
      "defaultValue": "\"Another code has been sent to {email}\""
    },
    "codeStep_invalidCodeText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Invalid code text",
            "name": "uiName"
          }, {
            "text": "Code Verification Step",
            "name": "uiGroup"
          }],
        "text": "Error text displayed under verification input"
      },
      "attribute": "code-step_invalid-code-text",
      "reflect": false,
      "defaultValue": "\"Please check your code and try again. If you\u2019re still having trouble, try resending your code.\""
    },
    "codeStep_verifyText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Verify code button text",
            "name": "uiName"
          }, {
            "text": "Code Verification Step",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "code-step_verify-text",
      "reflect": false,
      "defaultValue": "\"Verify\""
    },
    "codeStep_networkErrorMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Network error message",
            "name": "uiName"
          }, {
            "text": "Code Verification Step",
            "name": "uiGroup"
          }],
        "text": "Displayed when the email verification fails due to a network error. The participant can try refreshing the page."
      },
      "attribute": "code-step_network-error-message",
      "reflect": false,
      "defaultValue": "\"An error occurred while verifying your email. Please refresh the page and try again.\""
    },
    "stateController": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "{ \"title\": \"Step 1: Enter email\", \"props\": { \"showCode\": false }, \"dependencies\": [\"sqm-email-verification\"], \"uiGroup\": \"Email Verification Step\" }",
            "name": "componentState"
          }, {
            "text": "{ \"title\": \"Step 2: Enter code\", \"props\": { \"showCode\": true }, \"dependencies\": [\"sqm-code-verification\"], \"uiGroup\": \"Code Verification Step\" }",
            "name": "componentState"
          }],
        "text": ""
      },
      "attribute": "state-controller",
      "reflect": false,
      "defaultValue": "\"{}\""
    }
  }; }
}
function useDemoWidgetVerificationInternal(props) {
  const [showCode, setShowCode] = useParentState({
    namespace: SHOW_CODE_NAMESPACE,
    initialValue: false,
  });
  const [email, setEmail] = useParentState({
    namespace: VERIFICATION_EMAIL_NAMESPACE,
    initialValue: undefined,
  });
  const setContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
  const states = parseStates(props.stateController);
  const formatted = Object.keys(states).reduce((prev, key) => key === "sqm-widget-verification"
    ? { ...prev, ...states[key] }
    : { ...prev, [`${key}_stateController`]: states[key] }, {});
  const onVerification = () => {
    setContext(true);
  };
  return deepmerge({ showCode, onVerification, loading: false }, formatted || {}, { arrayMerge: (_, a) => a });
}
