import * as Utilities from '../UtilitiesFunctions'
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import {
  text,
  boolean,
  number,
  object,
  array,
  date,
  color,
  button,
  select
} from '@storybook/addon-knobs/react';
import { withInfo } from '@storybook/addon-info';
import { linkTo } from '@storybook/addon-links'

storiesOf('Utilities', module)
  .add('JSONToCSVConvertor',
     withInfo(`
     	Function to download JSON or JS object as excel
     `)(
          () => {
            const params = [
              JSON.parse(text('JSONData',`[
                {"a":1,"b":2},{"a":3,"b":4} 
              ]`)),
              text('fileTitle','MyFile'),
              text('extension','.csv')
            ]
          	return (
              <button
            		onClick={()=>Utilities.JSONToCSVConvertor(...params)}>Click Me
              </button>
              )
          }
     ))
  .add('Scroll to',
     withInfo(`
      Function to scroll an element to another point horizontally or vertically in some time
     `)(
          () => {
          const params = [
            scroll,
            number('nextPosition',200),
            select('position', {
            'vertical':'vertical',
            'horizontal': 'horizontal'
            }, 'vertical' , 'groupId'),
            number('scrollDuration',300)
          ]
          return(
            <div>
              <button 
                onClick={()=>Utilities.scrollTo(...params)}
                >Click Me</button>
              <div ref={el=>scroll = el} style={{height:'100px',width:'100px',overflow:'scroll'}}>
                <div style={{background:'palevioletred',height:'500px',width:'300px'}}></div>
              </div>
            </div>
          )
        }
     ))
  .add('Date Formatter',
     withInfo(`
      Function to format epoch time into desired date format
     `)(
          () => {
          const params = [
            number('date',151232323132),
            text('format','DD-MM-YYYY | HH:mm')
          ]
          return(
            <div>
              {Utilities.dateFormatter(...params)}
            </div>
          )
        }
     ))
  .add('Time Difference',
     withInfo(`
      Function to format difference between two moments
     `)(
          () => {
          const params = [
            number('t1',151232323132),
            number('t2',151232323189)
          ]
          return(
            <div>
              {Utilities.timeDifferenceInDaysAndHours(...params)}
            </div>
          )
        }
     ))