import React from 'react';
import {storiesOf} from '@storybook/react';
import {action} from '@storybook/addon-actions';

import EmptyState from '../../Components/EmptyState/src';
import emptyStateNote from '../../Components/EmptyState/README.md';
import {Sent, SIZE, COLOR} from '../../Components/Icon/src';
import {Title} from '../../Components/Title/src';
import {TYPES} from '../../Components/Title/src/types';
import Button, {BUTTON_TYPE} from '../../Components/Button/src';

const emptyStateData = {
  icon: <Sent size={SIZE.LARGE} color={COLOR.BLUE} />,
  title: <Title type={TYPES.H1}>No payouts here yet</Title>,
  description: 'You’ll see regular payouts here as soon as you start working with us!',
  button: (
    <Button
      elementId="pub-push-list-empty-state-create-button"
      onClick={action('click')}
      type={BUTTON_TYPE.PRIMARY}
    >
      Click me
    </Button>
  ),
};

export default storiesOf('Components | EmptyState', module)
  .add('default view', () => (
    <EmptyState
      icon={emptyStateData.icon}
      description={emptyStateData.description}
      title={emptyStateData.title}
      actions={emptyStateData.button}
    />
  ), {
    notes: emptyStateNote,
  })
  .add('only title and description', () => (
    <EmptyState
      title={emptyStateData.title}
      description={emptyStateData.description}
    />
  ));