import { ComponentStory, ComponentMeta } from '@storybook/react';
import { TextField } from './index';

export default {
  title: 'Design System/TextField',
  component: TextField,
  argTypes: {
    isAutoComplete: {
      control: { type: 'boolean' },
    },
    leftElement: {},
    rightElement: {},
    shapeVariant: {
      options: ['round', 'square'],
      control: { type: 'select' },
    },
    sizeVariant: {
      options: ['extra-small', 'small', 'medium', 'large', 'content'],
      control: { type: 'select' },
    },
    colorVariant: {
      options: ['primary', 'secondary', 'base', 'base-01', 'base-02', 'body', 'transparent'],
      control: { type: 'select' },
    },
    backgroundVariant: {
      options: ['primary', 'secondary', 'base', 'base-01', 'base-02', 'body', 'transparent'],
      control: { type: 'select' },
    },
    variant: {
      options: ['plain', 'outline', 'float'],
      control: { type: 'select' },
    },
  },
} as ComponentMeta<typeof TextField>;

export const Interactive: ComponentStory<typeof TextField> = (args) => {
  return <TextField {...args} />;
};

Interactive.args = {
  placeholder: 'Enter a joke 😊',
  variant: 'plain',
  sizeVariant: 'medium',
  shapeVariant: 'round',
  colorVariant: 'body',
  backgroundVariant: 'base-01',
  isAutoComplete: false,
  caption: 'I am error here',
  label: 'Label',
};