/* global window,document */

import React, {Component} from 'react';

import {render} from 'react-dom';

import MapGL from 'react-map-gl';

import DeckGLOverlay from './deckgl-overlay.js';

import {json as requestJson} from 'd3-request';

// Set your mapbox token here

const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line

const MALE_COLOR = [0, 128, 255];

const FEMALE_COLOR = [255, 0, 128];

// Source data CSV

const DATA_URL =

'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/scatterplot/manhattan.json'; // eslint-disable-line

class Root extends Component {

constructor(props) {

super(props);

this.state = {

viewport: {

...DeckGLOverlay.defaultViewport,

width: 500,

height: 500

},

data: null

};

requestJson(DATA_URL, (error, response) => {

if (!error) {

this.setState({data: response});

}

});

}

componentDidMount() {

window.addEventListener('resize', this._resize.bind(this));

this._resize();

}

_resize() {

this._onViewportChange({

width: window.innerWidth,

height: window.innerHeight

});

}

_onViewportChange(viewport) {

this.setState({

viewport: {...this.state.viewport, ...viewport}

});

}

render() {

const {viewport, data} = this.state;

return (

<MapGL

{...viewport}

onViewportChange={this._onViewportChange.bind(this)}

mapboxApiAccessToken={MAPBOX_TOKEN}

>

<DeckGLOverlay

viewport={viewport}

data={data}

maleColor={MALE_COLOR}

femaleColor={FEMALE_COLOR}

radius={30}

/>

</MapGL>

);

}

}

render(<Root />, document.body.appendChild(document.createElement('div')));