import { h } from "@stencil/core";
import { PortalRegistrationFormView, } from "./sqm-portal-registration-form-view";
export default {
  title: "Components/Microsite Portal Register",
};
// TODO: Figure out if we can delete this component and it's stories since we have a duplicate
const defaultProps = {
  states: {
    error: "",
    loading: false,
    confirmPassword: true,
    hideInputs: false,
    loginPath: "/login",
  },
  callbacks: {
    submit: () => console.log("Submit!"),
    inputFunction: () => { },
  },
  refs: {
    formRef: {},
  },
  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
};
const errorProps = {
  states: {
    error: "Something went wrong. Please try again.",
    loading: false,
    confirmPassword: true,
    hideInputs: false,
    loginPath: "/login",
  },
  callbacks: {
    submit: () => console.log("Submit!"),
    inputFunction: () => { },
  },
  refs: {
    formRef: {},
  },
  content: {
    pageLabel: "Register",
    confirmPasswordLabel: "Confirm Password",
  },
};
const loadingProps = {
  states: {
    error: "",
    loading: true,
    confirmPassword: true,
    hideInputs: false,
    loginPath: "/login",
  },
  callbacks: {
    submit: () => console.log("Submit!"),
    inputFunction: () => { },
  },
  refs: {
    formRef: {},
  },
  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
};
const slottedProps = {
  states: {
    error: "",
    loading: false,
    confirmPassword: true,
    hideInputs: false,
    loginPath: "/login",
  },
  callbacks: {
    submit: () => console.log("Submit!"),
    inputFunction: () => { },
  },
  refs: {
    formRef: {},
  },
  content: {
    pageLabel: "Register",
    confirmPasswordLabel: "Confirm Password",
    formData: (h("div", null,
      h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label, base: input-base", label: "Slotted Input", required: true }),
      h("sl-input", { exportparts: "label: input-label, base: input-base", label: "Slotted Input 2", required: true }))),
  },
};
export const Default = () => h(PortalRegistrationFormView, Object.assign({}, defaultProps));
export const RegisterWithError = () => (h(PortalRegistrationFormView, Object.assign({}, errorProps)));
export const RegisterLoading = () => (h(PortalRegistrationFormView, Object.assign({}, loadingProps)));
export const FieldsHidden = () => {
  return (h("sqm-portal-register", { demoData: {
      states: {
        error: "",
        loading: true,
        registrationFormState: {},
        confirmPassword: true,
        hideInputs: true,
        loginPath: "/login",
      },
    } }));
};
export const SlottedInputs = () => (h(PortalRegistrationFormView, Object.assign({}, slottedProps)));
export const RegisterWithMarketingEmailsCheckbox = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps, { content: {
    ...defaultProps.content,
    emailOptIn: (h("sqm-checkbox-field", { checkboxLabel: "I would like to receive marketing and promotional emails for this referral program" })),
  } })));
export const TermsAndConditions = () => (h(PortalRegistrationFormView, Object.assign({}, defaultProps, { content: {
    ...defaultProps.content,
    terms: (h("p", null,
      "By signing up you agree to the",
      " ",
      h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"))),
  } })));
