import React, { Component, PropTypes } from 'react'
import { StyleSheet, View } from 'react-native'

export default class GridView extends Component {
  static propTypes = {
    alley: PropTypes.string,
    children: PropTypes.oneOfType([
      PropTypes.element,
      PropTypes.arrayOf(PropTypes.element)
    ]),
    gutter: PropTypes.string,
    style: PropTypes.object
  }

  static defaultProps = {
    alley: '0px',
    gutter: '0px'
  }

  render() {
    const { alley, children, gutter, style, ...other } = this.props

    const rootStyle = {
      ...style,
      ...styles.root
    }

    const contentContainerStyle = {
      ...styles.contentContainer,
      marginHorizontal: `calc(-0.5 * ${alley})`,
      paddingHorizontal: `${gutter}`
    }

    const newChildren = React.Children.map(children, (child) => {
      return child && React.cloneElement(child, {
        style: {
          ...child.props.style,
          ...styles.column,
          marginHorizontal: `calc(0.5 * ${alley})`
        }
      })
    })

    return (
      <View className='GridView' {...other} style={rootStyle}>
        <View style={contentContainerStyle}>
          {newChildren}
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  root: {
    overflow: 'hidden'
  },
  contentContainer: {
    flexDirection: 'row',
    flexGrow: 1
  },
  // distribute all space (rather than extra space)
  column: {
    flexBasis: '0%'
  }
})