import { h } from "@stencil/core";
import { LeadFormView } from "./sqm-lead-form-view";
export default {
  title: "Components/Lead Form",
};
const defaultProps = {
  states: {
    success: false,
    leadFormState: {},
    error: "",
    loading: false,
    referralCode: "ABC123",
  },
  callbacks: {
    submit: () => console.log("Submit!"),
    inputFunction: () => { },
    resetForm: () => { },
  },
  refs: {
    formRef: {},
  },
  content: {
    submitLabel: "Submit",
    pageLabel: "Submit your information",
    resubmitFormLabel: "Refer Another Friend",
    requiredFieldErrorMessage: "Cannot be empty",
    invalidEmailErrorMessage: "Must be a valid email address",
    submitSuccessHeader: "Referral submitted",
    submitSuccessDescription: "Our team will contact your friend to see if they’re a good fit. In the meantime, you can track this referral on Activity page.",
    submitErrorHeader: "An error occurred while submitting",
    submitErrorDescription: "Please try again later. If the problem continues, contact Support",
  },
};
const successProps = {
  ...defaultProps,
  states: {
    ...defaultProps.states,
    success: true,
    error: null,
  },
  content: {
    ...defaultProps.content,
    pageLabel: "Refer your friend",
  },
};
const errorProps = {
  ...defaultProps,
  states: {
    ...defaultProps.states,
    error: "Something went wrong. Please try again.",
    leadFormState: {
      validationErrors: {
        firstName: "Please enter a first name",
        lastName: "Please enter a last name",
        email: "Please enter a valid email",
      },
    },
  },
};
const loadingProps = {
  ...defaultProps,
  states: {
    ...defaultProps.states,
    loading: true,
  },
};
const slottedProps = {
  ...defaultProps,
  content: {
    ...defaultProps.content,
    formData: (h("div", null,
      h("sqm-lead-input-field", { "field-name": "firstName", "field-label": "First Name", "field-type": "text", "required-field-error-message": "Please enter a first name" }),
      h("sqm-lead-input-field", { "field-name": "lastName", "field-label": "Last Name", "field-type": "text", "required-field-error-message": "Please enter a last name" }),
      h("sqm-lead-input-field", { "field-name": "email", "field-label": "Email", "field-type": "email", "required-field-error-message": "Please enter a valid email address" }),
      h("sqm-lead-dropdown-field", null))),
  },
};
export const Default = () => h(LeadFormView, Object.assign({}, defaultProps));
export const LeadSubmitSuccess = () => h(LeadFormView, Object.assign({}, successProps));
export const LeadSubmitWithErrors = () => h(LeadFormView, Object.assign({}, errorProps));
export const LeadSubmitLoading = () => h(LeadFormView, Object.assign({}, loadingProps));
export const FieldsHidden = () => {
  return (h("sqm-lead-form", { demoData: {
      states: {
        leadFormState: {},
        error: "",
        success: false,
        loading: true,
        referralCode: "ABC123",
      },
    } }));
};
export const SlottedInputs = () => h(LeadFormView, Object.assign({}, slottedProps));
