import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import Select from '../components/FormElements/Select/select';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Form elements/Select',
  component: Select,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    id:{ control: 'text' },
    name:{ control: 'text' },
    isDisabled: { control: {type: 'boolean'}},
    isClearable: {control:{type: 'boolean'}},
    isSearchable: {control:{type: 'boolean'}},
    isMulti: {control:{type: 'boolean'}},
    error:{control:{type:'boolean'}},
    errorMessage:{control: 'text'},
    helperText:{control: 'text'},
    size: {defaultValue: 'default', control:{ type:"select", options:["default", "small", "medium", "large"]}},
    borderRadious: {control:{ type:"select", options:["small", "medium", "large"]}},
    variant: {defaultValue: 'default', control:{ type:"select", options:["default", "primary", "secondary"]}},
  },
} as ComponentMeta<typeof Select>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: ComponentStory<typeof Select> = (args) => <Select {...args} />;

export const Normal = Template.bind({});
Normal.args = {
  label: 'Country',
  placeholder: 'Select Country',
  helperText: 'React select helper text'
};

export const Search = Template.bind({});
Search.args = {
  label: 'Country',
  placeholder: 'Select Country',
  isSearchable: true
};

export const MultiSelect = Template.bind({});
MultiSelect.args = {
  label: 'Country',
  placeholder: 'Select Country',
  isMulti: true
};