import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Box, Button, Form, FormField, TextInput } from '~/index';

storiesOf('Inputs|TextInput', module)
  .addWithJSX('Default', () => {
    return (
      <TextInput
        onChange={(e: any) => {
          // eslint-disable-next-line no-console
          console.log(e.target.value);
        }}
      />
    );
  })
  .addWithJSX('With react-final-form', () => (
    <Form
      onSubmit={(values: any) => {
        action(values);
      }}
      initialValues={{ testField: 1234 }}
      render={({ handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          <FormField name="testField">
            <FormField.Label>The label</FormField.Label>
            <FormField.Input component={TextInput} placeholder="Placeholder" />
            <FormField.Error />
          </FormField>
          <Box mt="gridGap">
            <Button type="submit">Submit</Button>
          </Box>
        </form>
      )}
    />
  ));
