// @flow
import React from 'react';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { NextButton } from './index';
import { Box } from '../../../primitives';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './NEXT_BUTTON.mkd';

const logSubmit = e => {
  action('NEXT')();
  e.preventDefault();
};

storiesOf('Core/Actions/NextButton', module)
  .addDecorator(withInfo(configDocs(docs, NextButton)))

  .add('normal', () => (
    <Box colorName="background">
      <form onSubmit={logSubmit}>
        <NextButton>Press Enter</NextButton>
      </form>
    </Box>
  ))
  .add('disabled', () => (
    <Box colorName="background">
      <form onSubmit={logSubmit}>
        <NextButton disabled>Press Enter</NextButton>
      </form>
    </Box>
  ));
