import { h } from "@stencil/core";
import { AuthButtonsContainer, AuthColumn, AuthWrapper, ErrorStyles, HostBlock, } from "../../global/mixins";
import { createStyleSheet } from "../../styling/JSS";
import { TextSpanView } from "../sqm-text-span/sqm-text-span-view";
const style = {
  Wrapper: AuthWrapper,
  Column: AuthColumn,
  HostBlock: HostBlock,
  ":host": {
    margin: "0 auto",
    width: "100%",
  },
  ButtonsContainer: {
    ...AuthButtonsContainer,
    gap: "var(--sl-spacing-medium)",
    "& > *": {
      margin: "0 !important",
    },
  },
  ErrorStyle: ErrorStyles,
};
const vanillaStyle = `
sqm-portal-register {
  margin: 0 auto;
  width: 100%;
  display: block;
}

:host{
  display: block;
}

:host([hidden]) {
  display: none;
}
`;
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
export function BaseRegistrationFormView(props) {
  var _a, _b;
  const { states, content, callbacks } = props;
  return (h("div", { class: sheet.classes.Wrapper },
    h("style", { type: "text/css" },
      vanillaStyle,
      styleString),
    h(TextSpanView, { type: "h3" }, content.pageLabel),
    h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.handleEmailSubmit, novalidate: true },
      content.formData,
      h("sl-input", Object.assign({ exportparts: "label: input-label, base: input-base", type: "email", name: "/email", label: content.emailLabel || "Email", required: true, validationError: ({ value }) => {
          if (!value) {
            return content.requiredFieldErrorMessage;
          }
          // this matches shoelace validation, but could be better
          if (!value.includes("@")) {
            return content.invalidEmailErrorMessage;
          }
        } }, (((_a = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _a === void 0 ? void 0 : _a.email) ? {
        class: sheet.classes.ErrorStyle,
        helpText: ((_b = states === null || states === void 0 ? void 0 : states.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ||
          content.requiredFieldErrorMessage,
      }
        : []))),
      content.terms,
      h("div", { class: sheet.classes.ButtonsContainer },
        h("sl-button", { submit: true, exportparts: "base: primarybutton-base", type: "primary", style: { margin: "0" } }, content.submitLabel || "Register"),
        h("sl-menu-divider", { style: { margin: "0" } }),
        content.googleButton,
        content.secondaryButton))));
}
