/* @flow */
/*global $:true*/
/*eslint max-len: [2, 200, 4]*/ // extend the maximum allowed characters

import React from 'react'
import _ from 'lodash'

import {BoxGroup} from '../../components/BoxGroup'
import {generateUUID} from '../../redux/utils/generateUUID'

import {rootDataURL, generalConfig, chartsConfig} from '../../config/dataURLs'

import {convertIndicatorsToJSON} from '../../utilities/csvtojson'

// We can use Flow (http://flowtype.org/) to type our component's props
// and state. For convenience we've included both regular propTypes and
// Flow types, but if you want to try just using Flow you'll want to
// disable the eslint rule `react/prop-types`.
// NOTE: You can run `npm run flow:check` to check for any errors in your
// code, or `npm i -g flow-bin` to have access to the binary globally.
// Sorry Windows users :(.

export default class DashboardView extends React.Component {
  // Retrieve the data for the dashboard
  componentDidMount () {
    var generalURL = rootDataURL + '/' + generalConfig
    this.serverRequest = $.get(generalURL, (configData) => {
      this.setState({
        generalConfig: JSON.parse(configData)
      })

      var latestIndicatorsURL = rootDataURL + '/' + this.state.generalConfig['indicator-file']

      // Get the indicator data
      this.serverRequest = $.get(latestIndicatorsURL, (csvdata) => {
        var indicators = convertIndicatorsToJSON(csvdata)
        this.setState({
          indicators: indicators
        })

        var chartURL = rootDataURL + '/' + chartsConfig
        this.serverRequest = $.get(chartURL, (chartsConfigData) => {
          this.setState({
            chartsConfig: JSON.parse(chartsConfigData)
          })
          this.forceUpdate()
        })
      })
    })
  }

  // don't update if the data hasn't finished being retrieved
  shouldComponentUpdate () {
    var returnStatus = true

    if (!this.state) {
      returnStatus = false
    }
    console.log('shouldcomponentUpdate ' + returnStatus)
    return returnStatus
  }

  renderIntroText () {
    if (this.state.generalConfig['intro-text'].length > 0) {
      return {
        __html: this.state.generalConfig['intro-text']
      }
    }
  }

  renderTitleRight () {
    if (this.state.generalConfig['header-right-text'].length > 0) {
      return (this.state.generalConfig['header-right-text'])
    }
  }

  renderFooterRight () {
    if (this.state.generalConfig['footer-right-text'].length > 0) {
      return (this.state.generalConfig['footer-right-text'])
    }
  }

  render () {
    // If the data isn't defined - just show loading
    if (this.state === null ||
        this.state.indicators === null ||
        this.state.indicators === undefined) {
      return (<h1>Loading data</h1>)
    }

    // ToDo - dynamically calculate from the input data
    var maxBoxes = 3

    var boxGroups = []

    _.forIn(this.state.indicators, (item, key) => {
      if (item[0] !== undefined && item[0].category !== undefined && item[0].category.length > 0) {
        var uuid = generateUUID()
        var labelClass = item[0].category.toLowerCase().trim().replace(/ /g, '-')
        var labelTitle = item[0].category.toUpperCase()
        boxGroups.push(
          <BoxGroup
            labelClass={labelClass}
            labelTitle={labelTitle}
            data={item}
            maxBoxes={maxBoxes}
            key={uuid}
            chartsConfig={this.state.chartsConfig}
          />
        )
      }
    })

    return (
      <div>
        <div>
          <nav className='navbar econ-header'>
            <div className='container-fluid'>
              <span className='head-title'><a href='#'>SAN JOSE ECONOMIC INDICATORS</a></span>
              <span className='nav navbar-nav navbar-right head-title-right'>
                <span id='header-title-right-content'>{this.renderTitleRight()}</span>
              </span>
            </div>
          </nav>
        </div>
        <div className='container-fluid'>
          <div className='intro-text-container' dangerouslySetInnerHTML={this.renderIntroText()} />
            {boxGroups}
        </div>
        <div>
          <footer className='econ-footer'>
            <div className='container'>
              <span className='footer-right' id='footer-right-content'>{this.renderFooterRight()}</span>
            </div>
          </footer>
        </div>
      </div>
    )
  }
}

@@ -4251,20 +4251,22 @@
 'footer-
-righ
+subtex
 t' id='f

update class for footer"