import { h } from "@stencil/core";
import { PortalRegisterView, } from "../sqm-portal-register/sqm-portal-register-view";
import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
import { CheckboxFieldView, } from "./sqm-checkbox-field-view";
import scenario from "./sqm-checkbox-field.feature";
export default {
  title: "Components/Checkbox Field",
  parameters: {
    scenario,
  },
};
const defaultProps = {
  states: {
    registrationFormState: {
      validationErrors: {},
    },
    checked: false,
  },
  content: {
    checkboxName: "terms",
    checkboxLabel: "By signing up you agree to the {labelLink}",
    checkboxLabelLink: "https://example.com",
    checkboxLabelLinkText: "Terms and Conditions",
    errorMessage: "Must be checked",
  },
  callbacks: {
    setChecked: () => { },
  },
};
const defaultRegisterProps = {
  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",
  },
};
export const Default = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps))));
export const DefaultChecked = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { states: {
    ...defaultProps.states,
    checked: true,
  } }))));
export const CustomLabel = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { content: {
    ...defaultProps.content,
    checkboxLabel: "I Agree",
  } }))));
export const Error = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { states: {
    ...defaultProps.states,
    registrationFormState: {
      validationErrors: {
        agree: "Must be checked",
      },
    },
  } }))));
export const CustomError = createHookStory(() => (h(CheckboxFieldView, Object.assign({}, defaultProps, { states: {
    ...defaultProps.states,
    registrationFormState: {
      validationErrors: {
        agree: "Must be checked",
      },
    },
  }, content: {
    ...defaultProps.content,
    errorMessage: "This checkbox must be checked to continue",
  } }))));
export const TermsAndConditions = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
  //@ts-ignore
  content: {
    ...defaultRegisterProps.content,
    terms: (h("p", null,
      h("sqm-checkbox-field", null))),
  } }))));
export const TermsAndConditionsCustomLabel = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
  //@ts-ignore
  content: {
    ...defaultRegisterProps.content,
    terms: (h("p", null,
      "By signing up you agree to the",
      " ",
      h("a", { href: "https://example.com", target: "_blank" }, "Terms and Conditions"),
      h("sqm-checkbox-field", { "checkbox-label": "I agree" }))),
  } }))));
export const TermsAndConditionsLongCustomLabel = createHookStory(() => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { 
  //@ts-ignore
  content: {
    ...defaultRegisterProps.content,
    terms: (h("sqm-checkbox-field", { "checkbox-label": "Participants must be at least 18 years of age and a legal resident of the U.S. or Canada. By signing up to participate in the rewards program, you agree to the {labelLink}.", "checkbox-label-link": "https://www.example.com", "checkbox-label-link-text": "terms", "checkbox-name": "termsAndConditions" })),
  } }))));
