import React, { useState } from 'react';
import Searchbar from './index';
import IconButton from '../Controls/IconButton';
export default {
  title: 'Core/Searchbar',
  component: Searchbar
};

const Template = args => <Searchbar {...args} />;

const defaultArgs = {
  placeholder: 'Search'
};

export const Default = Template.bind({});
Default.args = {
  ...defaultArgs
};

function ControlledTemplate(args) {
  const [value, setValue] = useState(args.value);

  return <Searchbar {...args} value={value} onChange={setValue} />;
}

export const WithValue = Template.bind({});
WithValue.args = {
  ...defaultArgs,
  value: 'axeptio.eu'
};

export const Loading = Template.bind({});
Loading.args = {
  ...defaultArgs,
  loading: true,
  value: 'axeptio.eu'
};

export const WithEndAdornment = Template.bind({});
WithEndAdornment.args = {
  ...defaultArgs,
  endAdornment: <IconButton icon="ArrowNext" />
};

export const Controlled = ControlledTemplate.bind({});
Controlled.args = {
  ...defaultArgs
};