import { h } from "@stencil/core";
import { PortalRegisterView, } from "./sqm-portal-register-view";
export default {
  title: "Components/Microsite Register",
};
const defaultProps = {
  states: {
    registrationFormState: {},
    error: "",
    loading: false,
    confirmPassword: true,
    hideInputs: false,
    loginPath: "/login",
  },
  callbacks: {
    submit: () => console.log("Submit!"),
    inputFunction: () => { },
  },
  refs: {
    formRef: {},
  },
  content: {
    pageLabel: "Register",
    confirmPasswordLabel: "Confirm Password",
    requiredFieldErrorMessage: "Cannot be empty",
    invalidEmailErrorMessage: "Must be a valid email address",
  },
};
const errorProps = {
  states: {
    error: "Something went wrong. Please try again.",
    registrationFormState: {},
    loading: false,
    confirmPassword: true,
    hideInputs: false,
    loginPath: "/login",
  },
  callbacks: {
    submit: () => console.log("Submit!"),
    inputFunction: () => { },
  },
  refs: {
    formRef: {},
  },
  content: {
    pageLabel: "Register",
    confirmPasswordLabel: "Confirm Password",
    requiredFieldErrorMessage: "Cannot be empty",
    invalidEmailErrorMessage: "Must be a valid email address",
  },
};
const loadingProps = {
  states: {
    registrationFormState: {},
    error: "",
    loading: true,
    confirmPassword: true,
    hideInputs: false,
    loginPath: "/login",
  },
  callbacks: {
    submit: () => console.log("Submit!"),
    inputFunction: () => { },
  },
  refs: {
    formRef: {},
  },
  content: {
    pageLabel: "Register",
    confirmPasswordLabel: "Confirm Password",
    requiredFieldErrorMessage: "Cannot be empty",
    invalidEmailErrorMessage: "Must be a valid email address",
  },
};
const slottedProps = {
  states: {
    registrationFormState: {},
    error: "",
    loading: false,
    confirmPassword: true,
    hideInputs: false,
    loginPath: "/login",
  },
  callbacks: {
    submit: () => console.log("Submit!"),
    inputFunction: () => { },
  },
  refs: {
    formRef: {},
  },
  content: {
    pageLabel: "Register",
    confirmPasswordLabel: "Confirm Password",
    requiredFieldErrorMessage: "Cannot be empty",
    invalidEmailErrorMessage: "Must be a valid email address",
    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(PortalRegisterView, Object.assign({}, defaultProps));
export const RegisterWithError = () => h(PortalRegisterView, Object.assign({}, errorProps));
export const RegisterLoading = () => h(PortalRegisterView, Object.assign({}, loadingProps));
export const FieldsHidden = () => {
  return (h("sqm-portal-register", { demoData: {
      states: {
        registrationFormState: {},
        error: "",
        loading: true,
        confirmPassword: true,
        hideInputs: true,
        loginPath: "/login",
      },
    } }));
};
export const SlottedInputs = () => h(PortalRegisterView, Object.assign({}, slottedProps));
export const TermsAndConditions = () => (h(PortalRegisterView, 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"))),
  } })));
