import React from 'react';
import { storiesOf } from '@storybook/react';
import { boolean, number, select } from '@storybook/addon-knobs';
import { asyncStates } from '../../storybook/utils';

import { SpinnerLoader } from './index';

const props = ({
  isAlwaysVisible = undefined,
  isStatic = undefined,
  hasOverlay = undefined,
  size = undefined,
  width = undefined,
  asyncStatus = undefined,
  asyncStatusList = undefined,
} = {}) => ({
  isAlwaysVisible: boolean('is always visible', isAlwaysVisible),
  isStatic: boolean('is static', isStatic),
  hasOverlay: boolean('has overlay', hasOverlay),
  size: number('size', size),
  width: number('width', width),
  asyncStatus: select('async status', asyncStates({ isList: false }), asyncStatus),
  asyncStatusList: select('async status list', asyncStates({ isList: true }), asyncStatusList),
});


storiesOf('Web|Loader/Spinner', module)
  .add('default', () => (
    <SpinnerLoader {...props()} />
  ))
