import React, { Component } from 'react'
import {render} from 'react-dom'
import random from 'lodash.random'

import Column from '../../src'
import LoremImage from '../../src'
import styles from './styles.css'

const dimensions = [
  { width: 800, height: 1200 },
  { width: 800, height: 600 },
  { width: 800, height: 800 },
  { width: 800, height: 600 },
  { width: 800, height: 1200 },
  { width: 800, height: 600 },
  { width: 800, height: 400 },
  { width: 800, height: 400 },
  { width: 800, height: 400 },
  { width: 800, height: 800 },
]

class Demo extends Component {
  constructor(props) {
    super(props)
    this.state = {
      columns: 5,
    }
    this.onColumnsButtonClick = this.onColumnsButtonClick.bind(this)
  }

  onColumnsButtonClick() {
    this.setState({ columns: random(1, 5) })
  }

  renderItems() {
    return dimensions.map(({ width, height }, i) => (
      <div key={i} className={styles.demoItem} style={{
        paddingTop: (height/width*100) + '%'
      }}>
        <img src={`http://placehold.it/${width}x${height}?text=${i+1}`} alt="" />
      </div>
    ))
  }

  render() {
    const { columns } = this.state
    const queries = [{
      columns: 2,
      query: 'min-width: 500px'
    }, {
      columns: 3,
      query: 'min-width: 1000px'
    }]
    return (
      <div>
        <h1>react-columns Demo</h1>
        <p>By default react-columns iterates over the columns and spreads the children equally among them </p>
        <Column gap="20px" queries={queries}>
          {this.renderItems()}
        </Column>
        <hr/>
        <p>If you pass the dimensions of every item react-columns iterates over the children and adds them to the shortest column. It uses the aspect ratio to calculate a comparable height.</p>
        <p>This also demonstrates a different value for the `gap` property. The vertical spacing is defined by the items' own styles.</p>
        <Column gap="10px" queries={queries} dimensions={dimensions}>
          {this.renderItems()}
        </Column>
        <hr/>
        <p>You can also simply set the columns directly without any automatic media query handling</p>
        <p>
          <button type="button" onClick={this.onColumnsButtonClick}>Randomize columns</button>
        </p>
        <Column gap="20px" columns={columns} dimensions={dimensions}>
          {this.renderItems()}
        </Column>
      </div>
    )
  }
}

render(<Demo/>, document.querySelector('#demo'))

@@ -116,16 +116,17 @@
 t Column
+s
  from '.
@@ -1463,32 +1463,33 @@
 %0A        %3CColumn
+s
  gap=%2220px%22 quer
@@ -1499,24 +1499,24 @@
 =%7Bqueries%7D%3E%0A
-
           %7Bt
@@ -1542,32 +1542,33 @@
         %3C/Column
+s
 %3E%0A        %3Chr/%3E%0A
@@ -1910,24 +1910,25 @@
      %3CColumn
+s
  gap=%2210px%22 
@@ -2009,32 +2009,33 @@
         %3C/Column
+s
 %3E%0A        %3Chr/%3E%0A
@@ -2272,16 +2272,17 @@
  %3CColumn
+s
  gap=%2220
@@ -2351,32 +2351,32 @@
 .renderItems()%7D%0A
-
         %3C/Column
@@ -2375,16 +2375,17 @@
 %3C/Column
+s
 %3E%0A      

Rename Column to Columns import in demo