import React from 'react';
import { storiesOf, action } from '@storybook/react';


import TextField from '../components/TextField';
import Button from '../components/Button';
import SelectField from '../components/SelectField';
import Form from '../components/Form';



storiesOf('🍗 TextField', module)
  .add('default', () => (
    <TextField name="name" label="a label" />
  ))
  .add('with a value', () => (
    <TextField name="name" label="a label" onChange={action('change')} value="some value" />
  ))
  .add('with a placeholder', () => (
    <TextField name="name" label="a label" placeholder="this is a placeholder" />
  ))
  .add('disabled', () => (
    <TextField name="name" label="a label" disabled />
  ))
  .add('disabled with a value', () => (
    <TextField name="name" label="a label" value="some value" disabled />
  ))
  .add('disabled with a placeholder', () => (
    <TextField name="name" label="a label" placeholder="this is a placeholder" disabled />
  ));



storiesOf('🍖 Button', module)
  .add('default', () => (
    <Button name="name">Click me</Button>
  ))
  .add('submit', () => (
    <Button name="name" submit>Submit me</Button>
  ))
  .add('disabled', () => (
    <Button name="name" disabled>Click me</Button>
  ))
  .add('disabled submit', () => (
    <Button name="name" submit disabled>Submit me</Button>
  ));


const options = [
  { value: 'value_a', text: 'Value A' },
  { value: 'value_b', text: 'Value B' },
];
const props = {
  label: 'a label',
  name: 'name',
  options,
  onChange: action('onChange'),
};
storiesOf('🍗 SelectField', module)
  .add('default', () => (
    <SelectField {...props} />
  ))
  .add('with a value', () => (
    <SelectField {...props} value="value_b" />
  ))
  .add('disabled', () => (
    <SelectField {...props} disabled />
  ))
  .add('disabled with a value', () => (
    <SelectField {...props} value="value_b" disabled />
  ));

const myProps = {
  intervalName: '',
  startMilestone: '',
  endMilestone: '',
  handleChange: action('handleChange'),
};
storiesOf('🍤 Form', module)
  .add('default', () => (
    <Form {...myProps} />
  ));