import { h } from "@stencil/core";
import { LeadDropdownFieldView, } from "./sqm-lead-dropdown-field-view";
export default {
  title: "Components/Lead Form Dropdown Field",
};
const defaultProps = {
  states: {
    leadFormState: {
      validationErrors: {},
      loading: false,
      disabled: false,
      initialData: {},
    },
  },
  content: {
    dropdownName: "country",
    dropdownLabel: "Country",
    requiredFieldErrorMessage: "Please select a country",
    optionalLabel: "(Optional)",
    dropdownOptional: false,
    multiple: false,
    selectOptions: [
      h("sl-menu-item", { value: "red" }, "Canada"),
      h("sl-menu-item", { value: "blue" }, "United States"),
      h("sl-menu-item", { value: "green" }, "Mexico"),
    ],
  },
};
export const Default = () => h(LeadDropdownFieldView, Object.assign({}, defaultProps));
export const Multiple = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps, { content: { ...defaultProps.content, multiple: true } })));
export const WithError = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps, { states: {
    ...defaultProps.states,
    leadFormState: {
      ...defaultProps.states.leadFormState,
      validationErrors: {
        country: "Please select a country",
      },
    },
  } })));
export const Disabled = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps, { states: {
    ...defaultProps.states,
    leadFormState: {
      ...defaultProps.states.leadFormState,
      disabled: true,
    },
  } })));
export const Loading = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps, { states: {
    ...defaultProps.states,
    leadFormState: {
      ...defaultProps.states.leadFormState,
      loading: true,
    },
  } })));
export const WithInitialValue = () => (h(LeadDropdownFieldView, Object.assign({}, defaultProps, { states: {
    ...defaultProps.states,
    leadFormState: {
      ...defaultProps.states.leadFormState,
      initialData: {
        country: "Canada",
      },
    },
  } })));
