// @flow
import React, { type Node } from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import { TextArea } from './index';
import { Grid, GridItem } from '../../structures';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './TEXTAREA.mkd';

const DemoWrapper = ({ children }: {| children: Node |}) => (
  <Grid>
    <GridItem sm={12} md={6} lg={4}>
      {children}
    </GridItem>
  </Grid>
);

storiesOf('Core/Forms/TextArea', module)
  .addDecorator(withInfo(configDocs(docs, TextArea)))
  .add('default', () => (
    <DemoWrapper>
      <TextArea
        label="Story"
        placeholder="Tell me a story"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
      />
    </DemoWrapper>
  ))
  .add('with height', () => (
    <DemoWrapper>
      <TextArea
        label="Story"
        height="250px"
        placeholder="Tell me a story"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
      />
    </DemoWrapper>
  ))
  .add('hidden label', () => (
    <DemoWrapper>
      <TextArea
        label="Story"
        hideLabel
        placeholder="Tell me a story"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
      />
    </DemoWrapper>
  ))
  .add('disabled', () => (
    <DemoWrapper>
      <TextArea
        disabled
        label="Text you cannot edit"
        value="Nope 🙅🏻‍♀️"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
      />
    </DemoWrapper>
  ))
  .add('focused on mount', () => (
    <DemoWrapper>
      <TextArea
        label="Story"
        placeholder="Tell me a story"
        value="Let me tell you a story"
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
        focusOnMount
      />
    </DemoWrapper>
  ))
  .add('resizable', () => (
    <DemoWrapper>
      <TextArea
        label="Story"
        resize
        onChange={action('onChange')}
        onFocus={action('onFocus')}
        onBlur={action('onBlur')}
      />
    </DemoWrapper>
  ));
