'use strict';

const index = require('./index-8277cbb3.js');
const JSS = require('./JSS-8503a151.js');
const mixins = require('./mixins-4761d472.js');
const sqmTextSpanView = require('./sqm-text-span-view-b9e10f5d.js');

const style = {
  Wrapper: mixins.AuthWrapper,
  Column: mixins.AuthColumn,
  ButtonsContainer: mixins.AuthButtonsContainer,
  Banner: {
    "&::part(erroralert-base)": {
      margin: "15px 0px",
    },
  },
  CodeError: {
    "&::part(erroralert-base)": {
      "margin-bottom": "15px",
    },
  },
  CodeSuccess: {
    "&::part(successalert-base)": {
      "margin-bottom": "15px",
    },
  },
  ContinueButton: {
    width: "100%",
  },
};
const vanillaStyle = `
:host {
  display: block;
}
:host([hidden]): {
  display: none;
}
`;
const sheet = JSS.createStyleSheet(style);
const styleString = sheet.toString();
function PortalResetPasswordView(props) {
  const { states, callbacks } = props;
  if (states.reset) {
    return (index.h("div", { class: `${sheet.classes.Wrapper} ${sheet.classes.Column}` },
      index.h("style", { type: "text/css" }, styleString),
      index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, states.content.resetPasswordHeader),
      index.h("sqm-form-message", { class: sheet.classes.CodeSuccess, exportparts: "success-icon" },
        index.h("div", { part: "successalert-text" }, states.content.resetSuccessText)),
      index.h("div", null,
        index.h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.gotoNextPage, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, states.content.continueButtonText))));
  }
  if (states.oobCodeValidating) {
    return index.h("div", null);
  }
  if (!states.oobCodeValid) {
    return (index.h("div", { class: `${sheet.classes.Wrapper} ${sheet.classes.Column}` },
      index.h("style", { type: "text/css" }, styleString),
      index.h("sqm-form-message", { class: sheet.classes.CodeError, type: "error", exportparts: "erroralert-icon" },
        index.h("div", { part: "erroralert-text" }, states.content.codeInvalidText)),
      index.h("div", null,
        index.h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.failed, exportparts: "base: primarybutton-base", type: "primary" }, states.content.continueButtonText))));
  }
  return (index.h("div", { class: sheet.classes.Wrapper },
    index.h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    index.h(sqmTextSpanView.TextSpanView, { type: "h2" }, states.reset
      ? states.content.passwordResetHeader
      : states.content.resetPasswordHeader),
    index.h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
      props.states.error && (index.h("sqm-form-message", { type: "error", class: sheet.classes.Banner, exportparts: "erroralert-icon" },
        index.h("div", { part: "erroralert-text" }, props.states.error))),
      !states.reset && (index.h("sqm-password-field", { fieldLabel: states.content.passwordFieldLabel, demoData: states.passwordDemoData, meetsRequirementsText: states.content.meetsRequirementsText, doesNotMeetRequirementsText: states.content.doesNotMeetRequirementsText, minErrorText: states.content.minErrorText, uppercaseErrorText: states.content.uppercaseErrorText, lowercaseErrorText: states.content.lowercaseErrorText, hasErrorText: states.content.hasErrorText })),
      !states.reset && states.confirmPassword && (index.h("sl-input", { exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: states.content.confirmPasswordFieldLabel, disabled: states.loading, required: true })),
      index.h("div", { class: sheet.classes.ButtonsContainer },
        index.h("sl-button", { class: sheet.classes.ContinueButton, submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, states.reset
          ? states.content.continueButtonText
          : states.content.resetPasswordButtonText)))));
}

exports.PortalResetPasswordView = PortalResetPasswordView;
