import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import InputField from '../components/FormElements/Input/InputField';
import Icons from '../constants/IconArray.js';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Form elements/Input',
  component: InputField,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    type: {control:{ type:"select", options:["text", "email", "search", "url", "number"]}},
    size: {defaultValue: 'default', control:{ type:"select", options:["default", "small", "medium", "large"]}},
    disable: { control: {type: 'boolean'} },
    iconPostions: {defaultValue: 'default',options: ['left', 'right'], control: { type: 'radio' },},
    borderRadious: {control:{ type:"select", options:["small", "medium", "large"]}},
    variant: {defaultValue: 'default', control:{ type:"select", options:["default", "primary", "secondary"]}},
    iconName: {defaultValue: 'date',control:{type: 'select', options:Icons}}
  },
} as ComponentMeta<typeof InputField>;

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

export const BasicInput = Template.bind({});
BasicInput.args = {
  label: 'First Name',
  placeholder: 'Enter the first name',
  helperText: 'Sample text'
};