import type { Meta, Story } from '@storybook/react';

import { TextField } from './index';
import type { TextFieldProps } from './index';
import mockTextField from './__mocks__/mockTextField';

export default {
  component: TextField,
  title: 'Forms/Input With Title (Text Field)',
  argTypes: {
    color: {
      options: ['primary', 'secondary'],
      control: { type: 'select' }
    },
    size: {
      options: ['medium', 'small'],
      control: { type: 'radio' }
    }
  }
} as Meta;

const Template: Story<TextFieldProps> = args => <TextField {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  ...mockTextField,
  required: true,
  labelWithHintProps: {
    tooltipText: 'Tooltip text'
  }
};

export const Disabled = Template.bind({});
Disabled.args = {
  ...mockTextField,
  disabled: true,
  value: 'Disabled'
};

export const Approved = Template.bind({});
Approved.args = {
  ...mockTextField,
  color: 'secondary',
  value: 'Approved'
};

export const Error = Template.bind({});
Error.args = {
  ...mockTextField,
  error: true,
  helperText: 'Error text',
  value: 'Error'
};