import React from 'react';
import { storiesOf } from '@storybook/react';
import {
  action,
  actions,
  configureActions,
  decorate,
  decorateAction,
} from '@storybook/addon-actions';
import { setOptions } from '@storybook/addon-options';
import { Button } from '@storybook/react/demo';
import { window, File } from 'global';

const pickNative = decorate([args => [args[0].nativeEvent]]);
const pickNativeAction = decorateAction([args => [args[0].nativeEvent]]);

storiesOf('Addons|Actions', module)
  .add('Hello World', () => <Button onClick={action('hello-world')}>Hello World</Button>)
  .add('Multiple actions', () => (
    <Button {...actions('onClick', 'onMouseOver')}>Hello World</Button>
  ))
  .add('Multiple actions + config', () => (
    <Button {...actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
      Moving away from this story will persist the action logger
    </Button>
  ))
  .add('Multiple actions, object', () => (
    <Button {...actions({ onClick: 'clicked', onMouseOver: 'hovered' })}>Hello World</Button>
  ))
  .add('Multiple actions, object + config', () => (
    <Button
      {...actions({ onClick: 'clicked', onMouseOver: 'hovered' }, { clearOnStoryChange: false })}
    >
      Moving away from this story will persist the action logger
    </Button>
  ))
  .add('Decorated action', () => (
    <Button onClick={pickNative.action('decorated')}>Native Event</Button>
  ))
  .add('Decorated action + config', () => (
    <Button onClick={pickNative.action('decorated', { clearOnStoryChange: false })}>
      Moving away from this story will persist the action logger
    </Button>
  ))
  .add('Decorated actions', () => (
    <Button {...pickNative.actions('onClick', 'onMouseOver')}>Native Event</Button>
  ))
  .add('Decorated actions + config', () => (
    <Button {...pickNative.actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
      Moving away from this story will persist the action logger
    </Button>
  ))
  .add('Circular Payload', () => {
    const circular = { foo: {} };
    circular.foo.circular = circular;
    return <Button onClick={() => action('circular')(circular)}>Circular Payload</Button>;
  })
  .add('Function Name', () => {
    const fn = action('fnName');
    return <Button onClick={fn}>Action.name: {fn.name}</Button>;
  })
  .add('Reserved keyword as name', () => <Button onClick={action('delete')}>Delete</Button>)
  .add('All types', () => {
    function A() {}
    function B() {}

    const bound = B.bind({});

    let file;
    try {
      file = new File([''], 'filename.txt', { type: 'text/plain', lastModified: new Date() });
    } catch (error) {
      file = error;
    }
    const reg = /fooBar/g;

    return (
      <div>
        {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
        <Button onClick={() => action('Array')(['foo', 'bar', { foo: 'bar' }])}>Array</Button>
        <Button onClick={() => action('Boolean')(false)}>Boolean</Button>
        <Button onClick={() => action('Empty Object')({})}>Empty Object</Button>
        <Button onClick={() => action('File')(file)}>File</Button>
        <Button onClick={() => action('Function')(A)}>Function A</Button>
        <Button onClick={() => action('Function (bound)')(bound)}>Bound Function A</Button>
        <Button onClick={() => action('Infinity')(Infinity)}>Infinity</Button>
        <Button onClick={() => action('-Infinity')(-Infinity)}>-Infinity</Button>
        <Button onClick={() => action('NaN')(NaN)}>NaN</Button>
        <Button onClick={() => action('null')(null)}>null</Button>
        <Button onClick={() => action('Number')(10000)}>Number</Button>
        <Button
          onClick={() =>
            action('Multiple')(
              'foo',
              1000,
              true,
              false,
              [1, 2, 3],
              null,
              undefined,
              { foo: 'bar' },
              window
            )
          }
        >
          Multiple
        </Button>
        <Button onClick={() => action('Plain Object')({ foo: { bar: { baz: { bar: 'foo' } } } })}>
          Plain Object
        </Button>
        <Button
          onClick={() =>
            action('ObjectDepth2', { depth: 2 })({ root: { one: { two: { three: 'foo' } } } })
          }
        >
          Object (depth: 2)
        </Button>
        <Button onClick={() => action('RegExp')(reg)}>RegExp</Button>
        <Button onClick={() => action('String')('foo')}>String</Button>
        <Button onClick={() => action('Symbol')(Symbol('A_SYMBOL'))}>Symbol</Button>
        <Button onClick={action('SyntheticMouseEvent')}>SyntheticEvent</Button>
        <Button onClick={() => action('undefined')(undefined)}>undefined</Button>
        <Button onClick={() => action('window')(window)}>Window</Button>
      </div>
    );
  })
  .add('configureActionsDepth', () => {
    configureActions({
      depth: 2,
    });

    return (
      <Button
        onClick={() => action('ConfiguredDepth')({ root: { one: { two: { three: 'foo' } } } })}
      >
        Object (configured depth: 2)
      </Button>
    );
  })
  .add('Persisting the action logger', () => (
    <div>
      <p>Moving away from this story will persist the action logger</p>
      <Button onClick={action('clear-action-logger', { clearOnStoryChange: false })}>
        Object (configured clearOnStoryChange: false)
      </Button>
    </div>
  ))
  .add('Limit Action Output', () => {
    configureActions({
      limit: 2,
    });

    return (
      <div>
        <Button onClick={() => action('False')(false)}>False</Button>
        <Button onClick={() => action('True')(true)}>True</Button>
      </div>
    );
  });

storiesOf('Addons|Actions.deprecated', module).add('Decorated Action', () => (
  <Button onClick={pickNativeAction('decorated')}>Native Event</Button>
));