import React from 'react';
import {storiesOf} from '@storybook/react';
import {action} from '@storybook/addon-actions';
import {
  boolean, text, select, object,
} from '@storybook/addon-knobs';
import {ThemeProvider} from 'styled-components';

import {Play, SIZE, COLOR} from '../../Components/Icon/src';
import Button, {BUTTON_TYPE, BUTTON_SIZE} from '../../Components/Button/src';
import buttonNote from '../../Components/Button/README.md';

const wait = (ms) => new Promise((res) => setTimeout(() => res(), ms));

// @ts-ignore
export default storiesOf('Components | Button', module)
  .add('Button with sync onClick', () => (
    <ThemeProvider
      theme={{
        actionColor: object('action color style', {
          main: '',
          active: '',
          hover: '',
        }),
        successColor: object('success color style', {
          main: '',
          active: '',
          hover: '',
        }),
        errorColor: object('error color style', {
          main: '',
          active: '',
          hover: '',
        }),
      }}
    >
      {Object.values(BUTTON_TYPE)
        .map((buttonType, idx) => (
          <span
            style={{
              margin: 5,
              display: 'inline-block',
            }}
          >
            <Button
              onClick={() => action('onClick')}
              elementId={`${buttonType}_${idx}`}
              type={buttonType}
              isDisabled={boolean('Disabled', false)}
              isFullWidth={boolean('Full width', false)}
              isLoading={boolean('Loading', false)}
              size={select('Size', Object.values(BUTTON_SIZE), BUTTON_SIZE.DEFAULT)}
            >
              {buttonType}
            </Button>
          </span>
        ))}
    </ThemeProvider>
  ), {notes: buttonNote})
  .add('Button with async onClick', () => (
    <Button
      onClick={async () => {
        await wait(3000);
        action('onClick');
      }}
      isAsync
      elementId={text('elementId', 'primaryButton')}
      type={select('Type', Object.values(BUTTON_TYPE), BUTTON_TYPE.PRIMARY)}
      isDisabled={boolean('Disabled', false)}
      isBig={boolean('Big', false)}
      isLoading={boolean('Loading', false)}
    >
      Button
    </Button>
  ))
  .add('Plain button with icon only', () => (
    <Button
      onClick={action('onClick')}
      elementId={text('elementId', 'iconPlainButton')}
      type={BUTTON_TYPE.PLAIN}
      isDisabled={boolean('Disabled', false)}
      isBig={boolean('Big', false)}
      isLoading={boolean('Loading', false)}
    >
      <Play color={COLOR.SUCCESS} size={SIZE.EXTRA_LARGE} />
    </Button>
  ));