"use strict";

// import dc from 'dc';
// import d3 from 'd3';
import _ from "lodash";
import React from "react";
import ReactDOM from "react-dom";
import util from "../../common/util";
import colors from "./colors";
import debugFactory from "debug";
const debug = debugFactory('app:components:CropYieldsVersusRainfall');
const stateData = require('../../components/panes/map/states');

var CropYieldsVersusRainfall = React.createClass({
    propTypes: {
        crop: React.PropTypes.object.isRequired,
        cropSource: React.PropTypes.object.isRequired,
        rainSource: React.PropTypes.object.isRequired,
        state: React.PropTypes.string.isRequired,
        location: React.PropTypes.object.isRequired,
        radius: React.PropTypes.number.isRequired,
    },

    getInitialState() {
        return {};
    },

    componentDidMount() {
        this.drawChart();
    },

    componentDidUpdate(prevProps) {
        if (prevProps.state !== this.props.state ||
            prevProps.radius !== this.props.radius ||
            prevProps.location.lat !== this.props.location.lat ||
            prevProps.location.lng !== this.props.location.lng ||
            prevProps.crop.name !== this.props.crop.name
        ) {
            this.drawChart();
        }
    },

    drawChart() {
        let el = ReactDOM.findDOMNode(this);

        //TODO: we don't need to re-get the rain data each time, only selected crop
        Promise.all([
            this.props.cropSource.list(this.props.crop.name),
            this.props.rainSource.list()
        ]).then((results) => {

            var yieldIndex = results[0].index;
            var rainIndex = results[1].index;

            var yearlyYieldDim = yieldIndex.dimension((d) => d3.time.month(d.date));
            var yearlyYieldGroup = yearlyYieldDim.group().reduceSum((d) => d.yield);

            var yearlyRainDim = rainIndex.dimension((d) => d3.time.year(d.date));
            var yearlyAverageRainGroup = yearlyRainDim.group().reduceSum((d) => d.high);

            var timeScale = d3.time.scale().domain([new Date(2000, 1, 1), new Date(2015, 12, 31)]);

            var compChart = dc.compositeChart(el);
            compChart
                .width($(el).innerWidth() - 30)
                .height(250)
                .margins({top: 10, left: 50, right: 80, bottom: 40})
                .x(timeScale)
                .xUnits(d3.time.years)
                .yAxisLabel('Actual Rainfall (inches)')
                .rightYAxisLabel(this.cropLabel(this.props.crop))
                .dimension(yearlyYieldDim)
                .brushOn(false)
                .compose([
                    dc.barChart(compChart)
                        .colors(colors.yearlyAverageRainfall)
                        .barPadding(0.1)
                        .group(yearlyAverageRainGroup),
                    dc.barChart(compChart)
                        .colors(colors.yield)
                        .barPadding(0.3)
                        .useRightYAxis(true)
                        .group(yearlyYieldGroup)
                ]);


            dc.renderAll();
            this.state.myChart = compChart;
        });
    },

    reset() {
        if (this.state && this.state.myChart) {
            this.state.myChart.filterAll();
            dc.redrawAll();
        }
    },

    cropUnits: {
        BARLEY: 'Bushels / Acre',
        BEANS: 'CWT / Acre',
        CORN: 'Bushels / Acre',
        COTTON: 'Bales / Acre',
        HAY: 'Tons / Acre',
        HAYLAGE: 'Tons / Acre',
        OATS: 'Bushels / Acre',
        RICE: 'CWT / Acre',
        SORGHUM: 'Bushels / Acre',
        SUGARBEETS: 'Tons / Acre',
        SUGARCANE: 'Tons / Acre',
        SOYBEANS: 'Bushels / Acre',
        WHEAT: 'Bushels / Acre'
    },

    //'COTTON' -> Cotton (Bales / Acre)
    cropLabel(crop) {
        const units = this.cropUnits[crop.name.toUpperCase()];
        const prefix = _.capitalize(crop.name);
        return prefix + ' (' + units + ')';
    },

    render() {
        const imageUrl = this.props.crop.imageUrl;
        const rainImgUrl = 'src/img/icons/blue-square.png';
        return (
            <div className={"cropYieldChart"} id="cropYieldsChartGeneric">
                <div className={"graphDescription"}>
                    <span className={"first"}>Historical {this.props.crop.name}<img src={imageUrl}/> to <img
                        src={rainImgUrl}/> rainfall in {stateData.statesByCode[this.props.state].name}</span>
                </div>
                <a className={"reset"} onClick={this.reset} style={{display: "none"}}>reset</a>
            </div>
        );
    },

});

module.exports = CropYieldsVersusRainfall;

@@ -4016,21 +4016,157 @@
   const 
-image
+cropName = _.capitalize(this.props.crop.name);%0A        const stateName = stateData.statesByCode%5Bthis.props.state%5D.name;%0A        const cropImg
 Url = th
@@ -4440,16 +4440,41 @@
 first%22%7D%3E
+%0A                        
 Historic
@@ -4477,33 +4477,21 @@
 orical %7B
-this.props.
 crop
-.n
+N
 ame%7D%3Cimg
@@ -4496,21 +4496,23 @@
 mg src=%7B
-image
+cropImg
 Url%7D/%3E t
@@ -4517,115 +4517,76 @@
  to 
-%3Cimg%0A                        src=%7BrainImgUrl%7D/%3E rainfall in %7BstateData.statesByCode%5Bthis.props.state%5D.name%7D
+Rainfall %3Cimg src=%7BrainImgUrl%7D/%3E in %7BstateName%7D%0A                    
 %3C/sp

Update Rainfall vs. Yield Chart Title