var React = require('react');

var MainComponent = require('../components/MainComponent');

require('../main.css');

var PropTypes = React.PropTypes;

var MainContainer = React.createClass({
  getDefaultProps: function() {
    return {
      isChartsVisible: true,
      headerHeight:100,
      breadCrumbsHeight:50,
    };
  },
  setHeight(repeat,val){
    //set the height of element based on a ratio 1.618
    if(repeat<1){
      return val
    } else{
      return this.setHeight(repeat-1, val/1.618)
    }
  },
  setSize: function(chartVis){
    //when state is not defined yet set to true
    var vis = this.state ? chartVis : true;
    var padding = this.state ? this.state.rowPadding : true;

    //components with fixed heights.
    var headerHeight = this.props.headerHeight;
    var breadCrumbsHeight = this.props.breadCrumbsHeight;

    //map and chart areas should scale to browser
    //for leaflet the map height needs to be explicit
    //adjustable heights.
    //first get whats leftover from fixed components
    // the calculate the map hieght.
    //give the rest to the chart
    var leftover = window.innerHeight -
                        (headerHeight + breadCrumbsHeight +
                          (padding*4)
                        );

    if (vis){
      var mapHeight = this.setHeight(1,leftover);
      var chartHeight = window.innerHeight - (leftover - mapHeight);
    } else {
      var mapHeight  = leftover
      var chartHeight = 0;
    }

    //do not let map height less than 250 pixels
    if (mapHeight < 300){
        mapHeight = 300
    }

    //do not let chart area less than 100 pixels
    //  may need to rethink this if the charts need more space....
    if (chartHeight < 100){
        chartHeight = 100
    }

    //set size varriabe
    return {
      isChartsVisible: vis,
      headerHeight: headerHeight,
      mapHeight: mapHeight,
      chartHeight: chartHeight,
      breadCrumbsHeight: breadCrumbsHeight,
      rowPadding: 1
    }
  },
  getInitialState: function () {
    var sizes = this.setSize();

    return{
      defpad:5,
      isChartsVisible: true,
      rowPadding: 1,
      headerHeight: sizes.headerHeight,
      mapHeight: sizes.mapHeight,
      chartHeight: sizes.chartHeight,
      breadCrumbsHeight: sizes.breadCrumbsHeight
    }
  },
  handleChartToggle: function(e){
    //toggle state of chart area
    //var active = !this.state.isChartsVisible;

    //set new map size without chart area
    var sizes = this.setSize(false);

    this.setState({
      isChartsVisible: sizes.isChartsVisible,
      headerHeight: sizes.headerHeight,
      mapHeight: sizes.mapHeight,
      chartHeight: sizes.chartHeight,
      breadCrumbsHeight: sizes.breadCrumbsHeight
    })

  },
  handleMapClick: function(e){

    //set new map size without chart area
    var sizes = this.setSize(true);

    this.setState({
      isChartsVisible: sizes.isChartsVisible,
      headerHeight: sizes.headerHeight,
      mapHeight: sizes.mapHeight,
      chartHeight: sizes.chartHeight,
      breadCrumbsHeight: sizes.breadCrumbsHeight
    })

  },
  handleResize: function(e) {

    //handling the scaling of map and chart areas
    var sizes = this.setSize(this.state.isChartsVisible);

    this.setState({
      headerHeight: sizes.headerHeight,
      mapHeight: sizes.mapHeight,
      chartHeight: sizes.chartHeight,
      breadCrumbsHeight: sizes.breadCrumbsHeight
    })
  },
  componentDidMount: function() {

    //handle resize.  - map and chart areas should scale to browser
    //width and height
    window.addEventListener('resize', this.handleResize);

    //for semantic-ui dropdowns..  not implemented yet
    $('.ui.dropdown').dropdown();
  },
  render: function() {
    return (
      <MainComponent
        defpad={this.state.defpad}
        handleChartToggle={this.handleChartToggle}
        isChartsVisible={this.state.isChartsVisible}
        handleMapClick={this.handleMapClick}
        headerHeight={this.state.headerHeight}
        mapHeight={this.state.mapHeight}
        chartHeight={this.state.chartHeight}
        breadCrumbsHeight={this.state.breadCrumbsHeight}
        rowPadding={this.state.rowPadding} />
    )

  }

});

module.exports = MainContainer;

@@ -244,35 +244,36 @@
 sChartsVisible: 
-tru
+fals
 e,%0A      headerH
@@ -627,19 +627,20 @@
 rtVis : 
-tru
+fals
 e;%0A    v
@@ -2105,19 +2105,20 @@
 isible: 
-tru
+fals
 e,%0A     

fix for initial state