import React from 'react'
import Hex from './Hex'
const { number, object, bool, string, array } = React.PropTypes
import HexShape from './HexShape'
import Path from './Path'
import Layout from './Layout'
import GridGenerator from './GridGenerator'

class HexGrid extends React.Component {
  render() {
    return (
      <svg className="grid" width={this.props.width} height={this.props.height} viewBox="-50 -50 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
        {
          this.props.hexagons.map((hex, index) => {
            return (
              <HexShape key={index} hex={hex} layout={this.props.layout} actions={this.props.actions} />
            );
          })
        }
        <Path {...this.props.path} layout={this.props.layout} />
      </svg>
    );
  }
}

HexGrid.generate = (config, content) => {
  let layout = new Layout(config.layout, config.origin);
  let generator = GridGenerator.getGenerator(config.map);
  let hexagons = generator.apply(this, config.mapProps);

  return { hexagons, layout };
}

HexGrid.propTypes = {
  width: number.isRequired,
  height: number.isRequired,
  actions: object.isRequired,
  layout: object.isRequired,
  hexagons: array.isRequired,
  path: object
};

HexGrid.defaultProps = {
  width: 800,
  height: 600,
  path: { start: null, end: null }
}

export default HexGrid;

@@ -295,16 +295,99 @@
 der() %7B%0A
+    const %7B width, height, viewBox, hexagons, layout, actions, path %7D = this.props%0A
     retu
@@ -426,27 +426,16 @@
  width=%7B
-this.props.
 width%7D h
@@ -441,27 +441,16 @@
 height=%7B
-this.props.
 height%7D 
@@ -461,25 +461,17 @@
 Box=
-%22-50 -50 100 100%22
+%7BviewBox%7D
  ver
@@ -537,27 +537,16 @@
         
-this.props.
 hexagons
@@ -639,35 +639,24 @@
 ex%7D layout=%7B
-this.props.
 layout%7D acti
@@ -660,27 +660,16 @@
 ctions=%7B
-this.props.
 actions%7D
@@ -722,28 +722,28 @@
     
-%3CPath %7B...this.props
+%7B!!path && %3CPath %7B..
 .pat
@@ -757,19 +757,8 @@
 ut=%7B
-this.props.
 layo
@@ -759,24 +759,25 @@
 =%7Blayout%7D /%3E
+%7D
 %0A      %3C/svg
@@ -1209,16 +1209,35 @@
 quired,%0A
+  viewBox: string,%0A
   path: 
@@ -1301,16 +1301,46 @@
 t: 600,%0A
+  viewBox: %22-50 -50 100 100%22,%0A
   path: 

allow setting of viewBox