class CountyMap extends Component {
    // Setup default D3 objects
    // projection - defines our geo projection, how the map looks
    // geoPath - calculates d attribute of <path> so it looks like a map
    // quantize - threshold scale with 9 buckets
    constructor(props) {
        super(props);

        this.projection = d3.geoAlbersUsa()
                            .scale(1280);
        this.geoPath = d3.geoPath()
                         .projection(this.projection);
        this.quantize = d3.scaleQuantize()
                          .range(d3.range(9));

        this.updateD3(props);
    }

    // update D3 objects when props update
    componentWillReceiveProps(newProps) {
        this.updateD3(newProps);
    }

    // Re-center the geo projection
    // Update domain of quantize scale
    updateD3(props) {
        this.projection.translate([props.width / 2, props.height / 2]);

        if (props.medianIncomes) {
            this.quantize.domain([10000, 75000]);
        }
    }

    // If no data, do nothing (we might mount before data loads into props)
    render() {
        if (!this.props.usTopoJson) {
            return null;
        }else{
            // Translate topojson data into geojson data for drawing
            // Prepare a mesh for states and a list of features for counties
            const us = this.props.usTopoJson,
                  statesMesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b),
                  counties = topojson.feature(us, us.objects.counties).features;

            // Loop through counties and draw <County> components
            // Add a single <path> for state borders
            return (
                <g>
                    {counties.map((feature) => <County geoPath={this.geoPath}
                        feature={feature}
                        key={feature.id}
                        quantize={this.quantize}
                        data={_.find(this.props.medianIncomes, {countyId: feature.id})} />)}

                     <path d={this.geoPath(statesMesh)} style={{fill: 'none',
                             stroke: '#fff',
                             strokeLinejoin: 'round'}} />
                </g>
            );
        }
    }
}

// Combine array of colors and quantize scale to pick fill colo
// Return a <path> element
const County = ({ data, geoPath, feature, quantize }) => {
    let color = BlankColor;

    if (data) {
        color = ChoroplethColors[quantize(data.medianIncome)];
    }

    return (<path d={geoPath(feature)} style={{fill: color}} title={feature.id} />)
};