import { h } from "@stencil/core";
import { PortalRegisterView, } from "../sqm-portal-register/sqm-portal-register-view";
import { InputFieldView } from "./sqm-input-field-view";
import scenario from "./sqm-input-field.feature";
export default {
  title: "Components/Input Field",
  parameters: {
    scenario,
  },
};
const defaultProps = {
  states: {
    registrationFormState: {
      validationErrors: {},
    },
  },
  content: {
    fieldName: "field",
    fieldLabel: "My Custom Input",
    fieldType: "text",
    fieldOptional: true,
    errorMessage: "Cannot be empty",
  },
};
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 = () => h(InputFieldView, Object.assign({}, defaultProps));
export const CustomLabel = () => (h(InputFieldView, Object.assign({}, defaultProps, { content: { ...defaultProps.content, fieldLabel: "My Label" } })));
export const Error = () => (h(InputFieldView, Object.assign({}, defaultProps, { states: {
    ...defaultProps.states,
    registrationFormState: {
      validationErrors: {
        field: "Cannot be empty",
      },
    },
  } })));
export const CustomError = () => (h(InputFieldView, Object.assign({}, defaultProps, { content: {
    ...defaultProps.content,
    errorMessage: "A value must be entered to continue",
  }, states: {
    ...defaultProps.states,
    registrationFormState: {
      validationErrors: {
        field: "Cannot be empty",
      },
    },
  } })));
export const DateType = () => {
  return (h(InputFieldView, Object.assign({}, defaultProps, { content: {
      ...defaultProps.content,
      fieldLabel: "Date",
      fieldType: "date",
    } })));
};
export const TelType = () => {
  return (h(InputFieldView, Object.assign({}, defaultProps, { content: {
      ...defaultProps.content,
      fieldLabel: "Phone Number",
      fieldType: "tel",
    } })));
};
export const RegistrationField = () => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { content: {
    ...defaultRegisterProps.content,
    formData: h(InputFieldView, Object.assign({}, defaultProps)),
  } })));
export const RegistrationFieldCustomLabel = () => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { content: {
    ...defaultRegisterProps.content,
    formData: (h(InputFieldView, Object.assign({}, defaultProps, { content: {
        ...defaultProps.content,
        fieldLabel: "Data",
      } }))),
  } })));
