import { Story, Meta } from '@storybook/react';
import Grid from '@mui/material/Grid';
import { SearchField } from './search-field';
import type { SearchFieldProps } from './search-field';

export default {
  component: SearchField,
  title: 'Forms/Search',
  argTypes: {
    size: {
      options: ['medium', 'small'],
      control: { type: 'radio' }
    },
    error: {
      description: 'The error state of the Search Field'
    },
    helperText: {
      description: 'The error message to display when something went wrong'
    },
    autoFocus: {
      description: 'Add focus state to the Search Field component'
    },
    disabled: {
      description: 'The disabled state of the Search Field'
    }
  }
} as Meta;

const Template: Story<SearchFieldProps> = args => {
  if (args.error) args = { ...args, helperText: 'Error' };
  return (
    <Grid container justifyContent="space-around" alignItems="center">
      <SearchField {...args} />
    </Grid>
  );
};

export const DefaultHoverAndActive = Template.bind({});
DefaultHoverAndActive.args = {
  error: false,
  helperText: '',
  autoFocus: true,
  placeholder: 'Search',
  disabled: false
};