import { h } from "@stencil/core";
import { AuthButtonsContainer, AuthColumn, AuthWrapper, } from "../../global/mixins";
import { createStyleSheet } from "../../styling/JSS";
import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
import { navigation } from "@saasquatch/component-boilerplate";
const vanillaStyle = `
:host {
  display: block;
}
:host([hidden]): {
  display: none;
}
`;
export function PortalForgotPasswordView(props) {
  const { states, callbacks, content } = props;
  const style = {
    FormWrapper: {
      ...AuthWrapper,
      background: content.backgroundColor || "var(--sqm-portal-background)",
      borderRadius: content.borderRadius || "var(--sqm-border-radius-normal)",
      border: content.border ||
        "var(--sqm-border-thickness) solid var(--sqm-border-color)",
    },
    Column: { ...AuthColumn },
    ButtonsContainer: AuthButtonsContainer,
    SecondaryButton: {
      margin: "auto",
      display: "block",
      cursor: "pointer",
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  return (h("div", { class: sheet.classes.FormWrapper, part: "sqm-base" },
    h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    h(TextSpanView, { type: "h3" }, content.messageSlot),
    h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
      props.states.error && (h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
        h("div", { part: "erroralert-text" }, props.states.error))),
      props.states.success && (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
        h("div", { part: "successalert-text" }, content.successAlertText))),
      h("sl-input", { exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true }),
      h("div", { class: sheet.classes.ButtonsContainer },
        h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Reset Password"),
        h("sl-button", { type: "secondary", exportparts: "base: secondarybutton-base", class: sheet.classes.SecondaryButton, disabled: states.loading, onClick: () => navigation.push(states.loginPath) }, content.loginText)))));
}
