// @flow
import React, { type Node } from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { TextArea } from './index';
import { Grid, GridItem } from '../../structures';
import { withDocs } from '../../../../.storybook/with-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)
  .add(
    'default',
    withDocs(docs, [DemoWrapper])(() => (
      <DemoWrapper>
        <TextArea
          label="Story"
          placeholder="Tell me a story"
          onChange={action('onChange')}
          onFocus={action('onFocus')}
          onBlur={action('onBlur')}
        />
      </DemoWrapper>
    )),
  )
  .add(
    'with height',
    withDocs(docs, [DemoWrapper])(() => (
      <DemoWrapper>
        <TextArea
          label="Story"
          height="250px"
          placeholder="Tell me a story"
          onChange={action('onChange')}
          onFocus={action('onFocus')}
          onBlur={action('onBlur')}
        />
      </DemoWrapper>
    )),
  )
  .add(
    'hidden label',
    withDocs(docs, [DemoWrapper])(() => (
      <DemoWrapper>
        <TextArea
          label="Story"
          hideLabel
          placeholder="Tell me a story"
          onChange={action('onChange')}
          onFocus={action('onFocus')}
          onBlur={action('onBlur')}
        />
      </DemoWrapper>
    )),
  )
  .add(
    'disabled',
    withDocs(docs, [DemoWrapper])(() => (
      <DemoWrapper>
        <TextArea
          disabled
          label="Text you cannot edit"
          value="Nope 🙅🏻‍♀️"
          onChange={action('onChange')}
          onFocus={action('onFocus')}
          onBlur={action('onBlur')}
        />
      </DemoWrapper>
    )),
  )
  .add(
    'focused on mount',
    withDocs(docs, [DemoWrapper])(() => (
      <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',
    withDocs(docs, [DemoWrapper])(() => (
      <DemoWrapper>
        <TextArea
          label="Story"
          resize
          onChange={action('onChange')}
          onFocus={action('onFocus')}
          onBlur={action('onBlur')}
        />
      </DemoWrapper>
    )),
  );
