import { ComponentMeta } from '@storybook/react';
import { GlobalSearch } from '../global-search';
import { args, argTypes, Template, custom, cities } from './helpers';

export default {
  title: 'Forms/Global Search',
  component: GlobalSearch,
  argTypes,
  args
} as ComponentMeta<typeof GlobalSearch>;

export const Single = Template.bind({});

export const Multiple = Template.bind({});

Multiple.args = {
  ...args,
  multiple: true
};

export const CustomOptions = Template.bind({});
CustomOptions.args = {
  disableGrouping: true,
  groupedOptions: {
    customOptions: custom
  }
};

export const WithActions = Template.bind({});
WithActions.args = {
  disableGrouping: true,
  groupedOptions: {
    customOptions: cities
  }
};

export const SearchAsYouType = Template.bind({});
SearchAsYouType.args = {
  ...args,
  disableGrouping: false,
  minInputLength: 2,
  placeholder: 'Start typing...'
};