import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { ScrollCushion, PaginatedScrollable,ScrollableBase } from './index'
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'
import {debounce,throttle} from '../../UtilitiesFunctions/objectUtilities'


const getItems = page => ([page*3,page*3+1,page*3+2])

class Wrap extends React.Component{
  constructor(){
    super()
    this.state={
      items : [],
      page : 0
    }
  }

  componentDidMount(){
    this.getItems(this.state.page)
  }

  getItems = page => {
    var items = this.state.items.concat(getItems(page))
    setTimeout( ()=>{
      this.setState({ items , page })
    }, 1000*page )
  }

  render(){
    return(
      <PaginatedScrollable
        page={this.state.page}
        noMorePages={boolean('noMorePages', false)}
        height='150px'
        fetchItems={this.getItems} >
        {
          this.state.items.map(el=>(
          <div 
            key={el} 
            style={{
              width:'100px', 
              height:'60px',
              lineHeight:'60px', 
              background:'red', 
              textAlign:'center'
            }}>{el}</div>
          ))
        }
      </PaginatedScrollable>
    )
  }
}

storiesOf('Controlled Scrollables', module)
  // .add('ScrollableBase',
  //    withInfo('A component which callbacks when you reach bottom. Has optional prop refCb which can be used to refer to the DOM element which is being scrolled')(
  //         () => (
  //         	<ScrollableBase	atBottom={action('Hit Bottom!!')} height='200px'>
  //         		<div style={{ background:'red', width:'50px', height:'500px' }}></div>
  //         	</ScrollableBase>
  //         )
  //    ))
  .add('PaginatedScrollable',
     withInfo(`Wrapper around ScrollableBase which lets you add custom loaders whenever you go to the next page.
      (The Wrap component below is used for simulating an api request. When you reach the bottom, a callback is fired unless 'noMorePages' is true.
      Check the code for further details)
      `)(
          () => (
          	<Wrap />
          )
     ))