import { isDemo, useSetParent } from "@saasquatch/component-boilerplate";
import { useState, withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop } from "@stencil/core";
import deepmerge from "deepmerge";
import { getProps } from "../../../utils/utils";
import { VERIFICATION_PARENT_NAMESPACE } from "../keys";
import { WidgetCodeVerificationView, } from "./sqm-code-verification-view";
import { useWidgetCodeVerification } from "./useCodeVerification";
export class WidgetCodeVerification {
  constructor() {
    /**
     * @uiName Verify code widget header text
     */
    this.verifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
    /**
     * @uiName Reverify code widget header text
     */
    this.reverifyCodeHeaderText = "Enter the code sent to {email} from our referral provider, impact.com.";
    /**
     * Text displayed under verify button
     * @uiName Resend code text
     */
    this.resendCodeText = "Didn't receive your code? {resendCodeLink}";
    /**
     * The link that appears in the resend code link
     * @uiName Resend code label
     */
    this.resendCodeLabel = "Resend code";
    /**
     * Link text displayed under verify button
     * @uiName Resend code text
     */
    this.codeResentSuccessfullyText = "Another code has been sent to {email}";
    /**
     * Error text displayed under verification input
     * @uiName Invalid code text
     */
    this.invalidCodeText = "Please check your code and try again. If you’re still having trouble, try resending your code.";
    /**
     * @uiName Verify code button text
     */
    this.verifyText = "Verify";
    /**
     * Displayed when the email verification fails due to a network error. The participant can try refreshing the page.
     * @uiName Network error message
     */
    this.networkErrorMessage = "An error occurred while verifying your email. Please refresh the page and try again.";
    withHooks(this);
  }
  disconnectedCallback() { }
  getTextProps() {
    return getProps(this);
  }
  render() {
    const props = isDemo()
      ? useDemoWidgetCodeVerification(this)
      : useWidgetCodeVerification(this);
    return h(WidgetCodeVerificationView, Object.assign({}, props));
  }
  static get is() { return "sqm-code-verification"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "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": ""
      },
      "attribute": "verify-code-header-text",
      "reflect": false,
      "defaultValue": "\"Enter the code sent to {email} from our referral provider, impact.com.\""
    },
    "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": ""
      },
      "attribute": "reverify-code-header-text",
      "reflect": false,
      "defaultValue": "\"Enter the code sent to {email} from our referral provider, impact.com.\""
    },
    "resendCodeText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Resend code text",
            "name": "uiName"
          }],
        "text": "Text displayed under verify button"
      },
      "attribute": "resend-code-text",
      "reflect": false,
      "defaultValue": "\"Didn't receive your code? {resendCodeLink}\""
    },
    "resendCodeLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Resend code label",
            "name": "uiName"
          }],
        "text": "The link that appears in the resend code link"
      },
      "attribute": "resend-code-label",
      "reflect": false,
      "defaultValue": "\"Resend code\""
    },
    "codeResentSuccessfullyText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Resend code text",
            "name": "uiName"
          }],
        "text": "Link text displayed under verify button"
      },
      "attribute": "code-resent-successfully-text",
      "reflect": false,
      "defaultValue": "\"Another code has been sent to {email}\""
    },
    "invalidCodeText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Invalid code text",
            "name": "uiName"
          }],
        "text": "Error text displayed under verification input"
      },
      "attribute": "invalid-code-text",
      "reflect": false,
      "defaultValue": "\"Please check your code and try again. If you\u2019re still having trouble, try resending your code.\""
    },
    "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": ""
      },
      "attribute": "verify-text",
      "reflect": false,
      "defaultValue": "\"Verify\""
    },
    "networkErrorMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Network error message",
            "name": "uiName"
          }],
        "text": "Displayed when the email verification fails due to a network error. The participant can try refreshing the page."
      },
      "attribute": "network-error-message",
      "reflect": false,
      "defaultValue": "\"An error occurred while verifying your email. Please refresh the page and try again.\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<WidgetCodeVerificationViewProps>",
        "resolved": "{ states?: { initialiseLoading: boolean; loading: boolean; email: string; verifyFailed?: boolean; emailResent: boolean; }; refs?: { codeWrapperRef: any; }; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../../global/demo"
          },
          "WidgetCodeVerificationViewProps": {
            "location": "import",
            "path": "./sqm-code-verification-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    },
    "onVerification": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "(token: string) => any",
        "resolved": "(token: string) => any",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }],
        "text": ""
      }
    }
  }; }
}
function useDemoWidgetCodeVerification(props) {
  const [emailResent, setEmailResent] = useState(false);
  const setVerifiedContext = useSetParent(VERIFICATION_PARENT_NAMESPACE);
  return deepmerge({
    states: {
      initialiseLoading: false,
      loading: false,
      email: "test@example.com",
      emailResent,
      verifyFailed: false,
    },
    refs: {
      codeWrapperRef: () => { },
    },
    callbacks: {
      resendEmail: async () => setEmailResent(true),
      submitCode: async () => setVerifiedContext(true),
    },
    text: props.getTextProps(),
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
