// @flow
import React, { type Node } from 'react';
import { action } from '@storybook/addon-actions';
import { NextButton } from './next-button.component';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import docs from './next-button.mdx';

export default {
  component: NextButton,
  title: 'Components/Actions/Next Button',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

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

const Form = ({ children }: { children: Node }) => (
  <form onSubmit={logSubmit}>{children}</form>
);

export const Default = () => (
  <Form>
    <NextButton>Press Enter</NextButton>
  </Form>
);

export const Disabled = () => (
  <Form>
    <NextButton disabled>Press Enter</NextButton>
  </Form>
);

export const Loading = () => (
  <Form>
    <NextButton isLoading>Press Enter</NextButton>
  </Form>
);

export const HiddenLabel = () => (
  <Form>
    <NextButton aria-label="Press enter" />
  </Form>
);

export const HiddenLabelDisabled = () => (
  <Form>
    <NextButton aria-label="Press enter" disabled />
  </Form>
);

export const HiddenLabelLoading = () => (
  <Form>
    <NextButton aria-label="Press enter" isLoading />
  </Form>
);

export const MixinsMarginOnlySpacing = () => (
  <MarginChecker Component={NextButton}>Press Enter</MarginChecker>
);
