import { h } from "@stencil/core";
import { AuthColumn, AuthWrapper } from "../../global/mixins";
import { createStyleSheet } from "../../styling/JSS";
import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
const style = {
  Wrapper: AuthWrapper,
  Column: AuthColumn,
  ContinueButton: {
    width: "100%",
  },
};
const vanillaStyle = `
:host {
  display: block;
}
:host([hidden]): {
  display: none;
}
`;
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
export function PortalVerifyEmailView(props) {
  const { states, data, callbacks, content } = props;
  if (states.loading)
    return;
  if (states.success) {
    return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
      h("style", { type: "text/css" },
        vanillaStyle,
        styleString),
      h(TextSpanView, { type: "h3" }, content.verifyEmailText),
      h("sqm-form-message", { exportparts: "success-icon" },
        h("div", { part: "successalert-text" }, content.verifySuccessText)),
      h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.gotoNextPage, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.continueText)));
  }
  if (states.error || !data.oobCode) {
    return (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
      h("style", { type: "text/css" }, styleString),
      h(TextSpanView, { type: "h3" }, content.verifyEmailText),
      h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
        h("div", { part: "erroralert-text" }, content.verifyInvalidText)),
      h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.failed, disabled: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.continueText)));
  }
}
