/* 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.MAPBOX_ACCESS_TOKEN; // eslint-disable-line

const MALE_COLOR = [0, 128, 255];

const FEMALE_COLOR = [255, 0, 128];

class Root extends Component {

constructor(props) {

super(props);

this.state = {

viewport: {

...DeckGLOverlay.defaultViewport,

width: 500,

height: 500

},

data: null

};

requestJson('./data/manhattan.json', (error, response) => {

if (!error) {

this.setState({data: response});

}

});

}

componentDidMount() {

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

this._resize();

}

_resize() {

this._onChangeViewport({

width: window.innerWidth,

height: window.innerHeight

});

}

_onChangeViewport(viewport) {

this.setState({

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

});

}

render() {

const {viewport, data} = this.state;

return (

<MapGL

{...viewport}

perspectiveEnabled={true}

onChangeViewport={this._onChangeViewport.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')));