'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,
  HostBlock: mixins.HostBlock,
  ":host": {
    margin: "0 auto",
    width: "100%",
  },
  ButtonsContainer: mixins.AuthButtonsContainer,
  ErrorStyle: mixins.ErrorStyles,
};
const vanillaStyle = `
sqm-portal-register {
  margin: 0 auto;
  width: 100%;
  display: block;
}

:host{
  display: block;
}

:host([hidden]) {
  display: none;
}
`;
const sheet = JSS.createStyleSheet(style);
const styleString = sheet.toString();
function PortalRegistrationFormView(props) {
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
  const { states, refs, callbacks, content } = props;
  if (states.error) {
    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
  }
  return (index.h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
    index.h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    index.h(sqmTextSpanView.TextSpanView, { type: "h3" }, content.pageLabel),
    index.h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
      ((_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.disabled) ? (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
        index.h("div", { part: "erroralert-text" }, states.registrationFormState.disabledMessage))) : (states.error && (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
        index.h("div", { part: "erroralert-text" }, props.states.error)))),
      content.formData,
      !states.hideInputs && (index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading || ((_b = states.registrationFormState) === null || _b === void 0 ? void 0 : _b.disabled) ||
          states.emailDisabled, required: true, validationError: ({ value }) => {
          if (!value) {
            return content.requiredFieldErrorMessage;
          }
          // this matches shoelace validation, but could be better
          if (!value.includes("@")) {
            return content.invalidEmailErrorMessage;
          }
        } }, (((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.initialData) === null || _d === void 0 ? void 0 : _d.email) ? {
        value: (_f = (_e = states.registrationFormState) === null || _e === void 0 ? void 0 : _e.initialData) === null || _f === void 0 ? void 0 : _f.email,
      }
        : {}), (((_h = (_g = states.registrationFormState) === null || _g === void 0 ? void 0 : _g.validationErrors) === null || _h === void 0 ? void 0 : _h.email) ? {
        class: sheet.classes.ErrorStyle,
        helpText: ((_k = (_j = states.registrationFormState) === null || _j === void 0 ? void 0 : _j.validationErrors) === null || _k === void 0 ? void 0 : _k.email) ||
          content.requiredFieldErrorMessage,
      }
        : [])))),
      !(states.hideInputs || states.hidePasswords) && (index.h("sqm-password-field", { fieldLabel: content.passwordLabel, "disable-validation": !states.enablePasswordValidation, meetsRequirementsText: content.meetsRequirementsText, doesNotMeetRequirementsText: content.doesNotMeetRequirementsText, minErrorText: content.minErrorText, uppercaseErrorText: content.uppercaseErrorText, lowercaseErrorText: content.lowercaseErrorText, hasErrorText: content.hasErrorText })),
      content.passwordField,
      !(states.hideInputs || states.hidePasswords) &&
        states.confirmPassword && (index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "password", name: "/confirmPassword", label: content.confirmPasswordLabel, disabled: states.loading || ((_l = states.registrationFormState) === null || _l === void 0 ? void 0 : _l.disabled), required: true }, (((_o = (_m = states.registrationFormState) === null || _m === void 0 ? void 0 : _m.initialData) === null || _o === void 0 ? void 0 : _o.confirmPassword) ? {
        value: (_q = (_p = states.registrationFormState) === null || _p === void 0 ? void 0 : _p.initialData) === null || _q === void 0 ? void 0 : _q.confirmPassword,
      }
        : {}), (((_s = (_r = states.registrationFormState) === null || _r === void 0 ? void 0 : _r.validationErrors) === null || _s === void 0 ? void 0 : _s.confirmPassword) ? {
        class: sheet.classes.ErrorStyle,
        helpText: ((_u = (_t = states.registrationFormState) === null || _t === void 0 ? void 0 : _t.validationErrors) === null || _u === void 0 ? void 0 : _u.confirmPassword) || content.requiredFieldErrorMessage,
      }
        : [])))),
      content.emailOptIn,
      content.terms,
      index.h("div", { class: sheet.classes.ButtonsContainer },
        index.h("sl-button", { submit: true, loading: states.loading, disabled: (_v = states.registrationFormState) === null || _v === void 0 ? void 0 : _v.disabled, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"),
        content.secondaryButton))));
}

exports.PortalRegistrationFormView = PortalRegistrationFormView;
