import React from 'react'
import { storiesOf } from '@storybook/react'
import { styled } from 'view-container'
import { Pagination } from 'molecules/Pagination'

const styles = {
  box: {
    fontFamily: 'Roboto',
  },
  h2: {
    color: '#a9a9a9',
  },
}

const renderProps = (key, i) => {
  return (
    <li key={i}>
      <b>{key}:</b> <i>{this.data[key].toString()}</i>
    </li>
  )
}

const renderStory = props => {
  this.data = props
  return (
    <div>
      <ul>{Object.keys(props).map(renderProps)}</ul>
      <hr />
      <Pagination {...props} />
    </div>
  )
}

storiesOf('molecules/Pagination', module)
  .addDecorator(story => (
    <div style={styles.box}>
      <h2 style={styles.h2}>Pagination...</h2>
      {story()}
    </div>
  ))
  .add('default', () => renderStory({}))
  .add('2000 items', () => renderStory({ total: 2000 }))
  .add('Mobile 2000 items', () => renderStory({ isMobile: true, total: 2000 }))
  .add('Mobile 2000 items, 50pp', () =>
    renderStory({ isMobile: true, total: 2000, size: 50 })
  )
  .add('2000 items, 100pp, no sizes', () =>
    renderStory({ total: 2000, size: 100, sizes: [] })
  )
  .add('1280 items, 32pp, custom sizes', () =>
    renderStory({ total: 1280, size: 32, sizes: [16, 32, 64, 128] })
  )
  .add('1280 items, 32pp, custom sizes, adaptive menu', () =>
    renderStory({
      total: 1280,
      size: 32,
      sizes: [16, 32, 64, 128],
      adaptive: true,
    })
  )