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 { PortalForgotPasswordView, } from "./sqm-portal-forgot-password-view";
import { usePortalForgotPassword } from "./usePortalForgotPassword";
/**
 * @uiName Microsite Forgot Password
 */
export class PortalForgotPassword {
  constructor() {
    this.ignored = true;
    /**
     * Redirect participants to this page after they verify their email.
     *
     * @uiName Email redirect
     * @uiWidget pageSelect
     */
    this.redirectPath = "/resetPassword";
    /**
     * @uiName Email field label
     */
    this.emailLabel = "Email";
    /**
     * @uiName Password reset button text
     */
    this.submitLabel = "Request Password Reset";
    /**
     * @uiName Login redirect path
     * @uiWidget pageSelect
     */
    this.loginPath = "/login";
    /**
     * @uiName Header text
     * @uiWidget textArea
     */
    this.headerText = "Enter your email below to receive a password reset link.";
    /**
     * @uiName Sign in link text
     */
    this.loginText = "Sign In";
    /**
     * Displayed when the forgot password action fails due to a network error. The participant can try refreshing the page.
     * @uiName Network error message
     */
    this.networkErrorMessage = "An error occurred while loading this page. Please refresh the page.";
    /**
     * @uiName Email verification sent text
     */
    this.successAlertText = "If an account with that email exists, a password reset email will be sent.";
    /**
     * @uiName Background color
     * @uiWidget color
     */
    this.backgroundColor = "var(--sqm-portal-background, #ffffff)";
    /**
     * @uiName Border radius
     * @uiWidget number
     */
    this.borderRadius = "var(--sqm-border-radius-normal, 8px)";
    /**
     * @uiName Border style
     * @uiWidget textArea
     */
    this.border = "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const { states, callbacks } = isDemo()
      ? usePortalForgotPasswordDemo(this)
      : usePortalForgotPassword(this);
    const content = {
      messageSlot: h("slot", { name: "messageSlot" }, this.headerText),
      emailLabel: this.emailLabel,
      submitLabel: this.submitLabel,
      successAlertText: this.successAlertText,
      loginText: this.loginText,
      backgroundColor: this.backgroundColor,
      borderRadius: this.borderRadius,
      border: this.border,
    };
    return (h(PortalForgotPasswordView, { states: states, callbacks: callbacks, content: content }));
  }
  static get is() { return "sqm-portal-forgot-password"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "redirectPath": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Email redirect",
            "name": "uiName"
          }, {
            "text": "pageSelect",
            "name": "uiWidget"
          }],
        "text": "Redirect participants to this page after they verify their email."
      },
      "attribute": "redirect-path",
      "reflect": false,
      "defaultValue": "\"/resetPassword\""
    },
    "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\""
    },
    "submitLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Password reset button text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "submit-label",
      "reflect": false,
      "defaultValue": "\"Request Password Reset\""
    },
    "loginPath": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Login redirect path",
            "name": "uiName"
          }, {
            "text": "pageSelect",
            "name": "uiWidget"
          }],
        "text": ""
      },
      "attribute": "login-path",
      "reflect": false,
      "defaultValue": "\"/login\""
    },
    "headerText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Header text",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": ""
      },
      "attribute": "header-text",
      "reflect": false,
      "defaultValue": "\"Enter your email below to receive a password reset link.\""
    },
    "loginText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Sign in link text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "login-text",
      "reflect": false,
      "defaultValue": "\"Sign In\""
    },
    "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 forgot password action fails due to a network error. The participant can try refreshing the page."
      },
      "attribute": "network-error-message",
      "reflect": false,
      "defaultValue": "\"An error occurred while loading this page. Please refresh the page.\""
    },
    "successAlertText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Email verification sent text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "success-alert-text",
      "reflect": false,
      "defaultValue": "\"If an account with that email exists, a password reset email will be sent.\""
    },
    "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": ""
      },
      "attribute": "background-color",
      "reflect": false,
      "defaultValue": "\"var(--sqm-portal-background, #ffffff)\""
    },
    "borderRadius": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Border radius",
            "name": "uiName"
          }, {
            "text": "number",
            "name": "uiWidget"
          }],
        "text": ""
      },
      "attribute": "border-radius",
      "reflect": false,
      "defaultValue": "\"var(--sqm-border-radius-normal, 8px)\""
    },
    "border": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Border style",
            "name": "uiName"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": ""
      },
      "attribute": "border",
      "reflect": false,
      "defaultValue": "\"var(--sqm-border-thickness, 1px) solid var(--sqm-border-color, #eaeaea)\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<PortalForgotPasswordViewProps>",
        "resolved": "{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; loginText?: string; backgroundColor?: string; borderRadius?: string; border?: string; textColor?: string; }; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "PortalForgotPasswordViewProps": {
            "location": "import",
            "path": "./sqm-portal-forgot-password-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
function usePortalForgotPasswordDemo(props) {
  return deepmerge({
    states: { error: "", loading: false, success: false },
    callbacks: {
      submit: async (_event) => { },
    },
    content: {
      secondaryButton: (h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", disabled: false, onClick: () => navigation.push(props.loginPath) }, props.loginText)),
      messageSlot: h("span", null, props.headerText),
      emailLabel: props.emailLabel,
      submitLabel: props.submitLabel,
      successAlertText: props.successAlertText,
      loginText: props.loginText,
      backgroundColor: props.backgroundColor,
      borderRadius: props.borderRadius,
      border: props.border,
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
