import {colorConfig} from './colors'
import Radium from 'radium'
import React, {Component} from 'react'
import {Cell as GridLayoutCell} from 'glare'
import uniqueId from 'lodash.uniqueid'
import {SIZES} from './sizes'

const styles = {
  cell: {
    padding: '1vw',
    margin: 5,
    boxShadow: '0px 1px 6px rgba(0, 0, 0, 0.12), 0px 1px 4px rgba(0, 0, 0, 0.24)',
    boxSizing: 'border-box',
    borderRadius: 2,
    color: '#fff'
  }
}

@Radium
export class Cell extends Component {
  componentWillMount () {
    this.setState({
      id: uniqueId('value_'),
      colorItem: Math.floor(Math.random() * colorConfig.length)
    })
  }

  render () {
    const {children, name, onPoll, value, width} = this.props

    const randomColors = {
      background: `linear-gradient(22.5deg, ${colorConfig[this.state.colorItem].light} , ${colorConfig[this.state.colorItem].dark})`
    }

    const childComponents = React.Children.map(children, (child) => {
      return React.cloneElement(child, {
        children,
        id: this.state.id,
        onPoll,
        value
      })
    })

    return (
      <GridLayoutCell
        name={name}
        style={Object.assign(styles.cell, randomColors)}>
          {childComponents}
      </GridLayoutCell>
    )
  }
}

@@ -432,16 +432,36 @@
 %0A  %7D%0A%7D%0A%0A
+let colorIndex = 0%0A%0A
 @Radium%0A
@@ -564,21 +564,20 @@
 iqueId('
-value
+cell
 _'),%0A   
@@ -588,67 +588,131 @@
 olor
-Item: Math.floor(Math.random() * colorConfig.length)
+: colorConfig%5BcolorIndex%5D%0A    %7D)%0A%0A    colorIndex++%0A%0A    if (colorIndex === colorConfig.length) %7B%0A      colorIndex = 0
 %0A    %7D
-)
 %0A  %7D
@@ -811,17 +811,16 @@
 domColor
-s
  = %7B%0A   
@@ -858,36 +858,24 @@
 (22.5deg, $%7B
-colorConfig%5B
 this.state.c
@@ -878,21 +878,16 @@
 te.color
-Item%5D
 .light%7D 
@@ -890,28 +890,16 @@
 ht%7D , $%7B
-colorConfig%5B
 this.sta
@@ -910,13 +910,8 @@
 olor
-Item%5D
 .dar
@@ -1233,17 +1233,16 @@
 domColor
-s
 )%7D%3E%0A    

add support for more cells then colors