import { Fragment, h } from "@stencil/core";
import { intl } from "../../global/global";
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,
    "max-width": "600px",
    border: "none",
    margin: "0",
  },
  Column: AuthColumn,
  HostBlock: HostBlock,
  ":host": {
    margin: "0 auto",
    width: "100%",
  },
  NameFieldWrapper: {
    display: "flex",
    gap: "var(--sl-spacing-medium)",
    marginBottom: "0 !important",
  },
  ContinueButton: { maxWidth: "169px" },
  ButtonsContainer: AuthButtonsContainer,
  SuccessAlertContainer: {
    "&::part(base)": {
      backgroundColor: "var(--sl-color-green-100)",
      borderTop: "none",
    },
  },
  ErrorAlertContainer: {
    "&::part(base)": {
      backgroundColor: "var(--sl-color-red-100)",
      borderTop: "none",
    },
  },
  NameInput: {
    marginBottom: "0",
    width: "50%",
  },
  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 LeadFormView(props) {
  var _a, _b, _c, _d;
  const { states, refs, callbacks, content } = props;
  if (states.error) {
    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
  }
  const getRequiredFieldErrorMessage = ({ fieldLabel, }) => intl.formatMessage({
    id: "requiredFieldErrorMessage",
    defaultMessage: content.requiredFieldErrorMessage,
  }, {
    fieldLabel,
  });
  return (h(Fragment, null,
    states.success && (h("div", { class: sheet.classes.Wrapper, part: "sqm-base" },
      h("style", { type: "text/css" },
        vanillaStyle,
        styleString),
      h(TextSpanView, { type: "h3" }, content.pageLabel),
      h("sqm-form-message", { loading: states.loading, exportparts: "success-icon" },
        h("b", null, content.submitSuccessHeader),
        h("br", null),
        h("div", { part: "successalert-text" }, content.submitSuccessDescription)),
      h("sl-button", { class: sheet.classes.ContinueButton, onClick: callbacks.resetForm, loading: states.loading, exportparts: "base: primarybutton-base", type: "default" }, content.resubmitFormLabel))),
    h("div", { class: sheet.classes.Wrapper, part: "sqm-base", style: { display: states.success ? "none" : "block" } },
      h("style", { type: "text/css" },
        vanillaStyle,
        styleString),
      h(TextSpanView, { type: "h3" }, content.pageLabel),
      h("sl-form", { class: sheet.classes.Column, "onSl-submit": callbacks.submit, ref: (el) => (refs.formRef.current = el), novalidate: true },
        states.error && (h("sqm-form-message", { type: "error" },
          h("p", { part: "alert-title" }, content.submitErrorHeader),
          h("p", { part: "alert-description" }, intl.formatMessage({
            id: "submitErrorDescription",
            defaultMessage: content.submitErrorDescription,
          }, {
            supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, content.supportLinkText)),
          })))),
        h("div", { class: sheet.classes.NameFieldWrapper },
          h("sqm-lead-input-field", { class: sheet.classes.NameInput, "field-label": content.firstNameLabel || "First Name", "field-name": "firstName" }),
          h("sqm-lead-input-field", { class: sheet.classes.NameInput, "field-label": content.lastNameLabel || "Last Name", "field-name": "lastName" })),
        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 getRequiredFieldErrorMessage({
                fieldLabel: content.emailLabel || "Email",
              });
            }
            // this matches shoelace validation, but could be better
            if (!value.includes("@")) {
              return content.invalidEmailErrorMessage;
            }
          } }, (((_b = (_a = states.leadFormState) === null || _a === void 0 ? void 0 : _a.validationErrors) === null || _b === void 0 ? void 0 : _b.email) ? {
          class: sheet.classes.ErrorStyle,
          helpText: ((_d = (_c = states.leadFormState) === null || _c === void 0 ? void 0 : _c.validationErrors) === null || _d === void 0 ? void 0 : _d.email) ||
            content.requiredFieldErrorMessage,
        }
          : []))),
        h("input", { type: "hidden", hidden: true, name: "/referralCode", value: states.referralCode }),
        content.formData,
        h("div", { class: sheet.classes.ButtonsContainer },
          h("sl-button", { submit: true, loading: states.loading, exportparts: "base: primarybutton-base", type: "primary" }, content.submitLabel || "Register"))))));
}
