import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import {FullScreenLoader,FullScreenLoaderComp , openFullScreenLoader,closeFullScreenLoader} from './FullScreenLoader/index'
import Spinner from './Spinner/index'
import Loader from './LoaderWrapper'
import {
  text,
  boolean,
  number,
  object,
  array,
  date,
  color,
  button
} from '@storybook/addon-knobs/react';
import { withInfo } from '@storybook/addon-info';
import { linkTo } from '@storybook/addon-links'



storiesOf('Loaders', module)
  .add('Loader Wrapper',
    withInfo('Displays loading screen over its children')(
          () => (
            <Loader visibility={boolean('visibility',false)}>
              <div style={{ width:`${number('Width',50)}px`, height:`${number('Height',100)}px`, background:'red' }}></div>
            </Loader>
          )
     ))
  .add('FullScreenLoader',
     withInfo('Full Screen Loader')(
          () => (
            <FullScreenLoader
              visibility={boolean('visibility',false)} 
            />
          )
     ))
  .add('Spinner',
     withInfo('Customizable Spinner')(
          () => (
            <Spinner
              visibility={boolean('visibility',false)} 
              color={color('Color', '#dd21f7', '1')}
              width={number('Width',64)}
              height={number('Height',64)}
              top={text('top')}
              left={text('left')}
              spikeWidth={text('SpikeWidth')}
              spikeHeight={text('spikeHeight')} 
            />
          )
     ))
  .add('FullScreenLoaderComp',
     withInfo('Full Screen Loader Comp')(
          () => {
            var b = button('Toggle',onClick)
            return <FullScreenLoaderComp /> 
          }
     ))
var a = true
var onClick =()=>{
  if(a){
    openFullScreenLoader()
  }
  else{closeFullScreenLoader()}
  a=!a
}