'use strict';

const index = require('./index-8277cbb3.js');
const JSS = require('./JSS-8503a151.js');
const mixins = require('./mixins-4761d472.js');

const style = {
  Wrapper: {
    ...mixins.AuthWrapper,
    ...mixins.gap({ direction: "column", size: "var(--sl-spacing-small)" }),
  },
  Column: mixins.AuthColumn,
  ForgotButtonContainer: {
    display: "inline",
    cursor: "pointer",
    "font-size": "13px",
    "font-weight": "600",
    color: "#AAAAAA",
    margin: "0",
  },
  ButtonsContainer: mixins.AuthButtonsContainer,
  ErrorStyle: mixins.ErrorStyles,
};
const vanillaStyle = `
:host {
  display: block;
}
:host([hidden]): {
  display: none;
}
a svg {
  margin: 0 auto;
  display: block;
}
`;
const sheet = JSS.createStyleSheet(style);
const styleString = sheet.toString();
function EmailRegistrationView(props) {
  var _a, _b, _c, _d;
  const { states, callbacks, content } = props;
  const getErrorMessage = (error, fraudErrorMessage, fraudErrorMessageTitle) => {
    return error === "FRAUD" ? (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
      index.h("b", null, fraudErrorMessageTitle),
      index.h("div", { part: "erroralert-text" }, fraudErrorMessage))) : (index.h("sqm-form-message", { type: "error", exportparts: "erroralert-icon" },
      index.h("div", { part: "erroralert-text" }, error)));
  };
  const emailValidationRegex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return (index.h("div", { part: "sqm-base", class: sheet.classes.Wrapper, style: {
      border: `${content.hideBorder
        ? "none"
        : "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)"}`,
      backgroundColor: content.backgroundColor,
      "padding-top": `var(--sl-spacing-${content.paddingTop})`,
      "padding-right": `var(--sl-spacing-${content.paddingRight})`,
      "padding-bottom": `var(--sl-spacing-${content.paddingBottom})`,
      "padding-left": `var(--sl-spacing-${content.paddingLeft})`,
    } },
    index.h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    content.topSlot,
    index.h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit },
      props.states.error &&
        getErrorMessage(props.states.error, props.content.fraudErrorMessage, props.content.fraudErrorMessageTitle),
      content.includeName && (index.h("sl-input", { exportparts: "label: input-label, base: input-base", type: "name", name: "/firstName", label: content.firstNameLabel || "First Name", disabled: states.loading })),
      content.includeName && (index.h("sl-input", { exportparts: "label: input-label, base: input-base", type: "name", name: "/lastName", label: content.lastNameLabel || "Last Name", disabled: states.loading })),
      index.h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", disabled: states.loading, required: true, validationError: ({ value }) => {
          if (!value) {
            return content.requiredFieldErrorMessage;
          }
          if (!value.match(emailValidationRegex)) {
            return content.invalidEmailErrorMessage;
          }
        } }, (((_b = (_a = states.registrationFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
        class: sheet.classes.ErrorStyle,
        helpText: ((_d = (_c = states.registrationFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
          content.requiredFieldErrorMessage,
      }
        : []))),
      index.h("div", { class: sheet.classes.ButtonsContainer, style: {
          paddingTop: `${content.includeName ? "var(--sl-spacing-medium)" : "0"}`,
        } },
        index.h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.registerLabel || "Registration"))),
    content.bottomSlot));
}

exports.EmailRegistrationView = EmailRegistrationView;
