import React, { Component } from 'react';
import Radium from 'radium';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import store from '../store.js';
import MapContainer from './map.js';
import Toolbar from './toolbar.js';
import PanelFeature from './panel-feature.js';
import PanelMarkers from './panel-markers.js';
import PanelLayers from './panel-layers.js';
import PanelTraces from './panel-traces.js';
import PanelGroups from './panel-groups.js';
import PanelSettings from './panel-settings.js';

@DragDropContext(HTML5Backend) // eslint-disable-line new-cap
@Radium
export default class App extends Component {

  
() {
    store.subscribe(() => this.forceUpdate());
  }

  get styles() {
    return {
      horizontal: {
        display: 'flex',
        flex: '1',
        flexFlow: 'row nowrap',
      },
      spacer: { flex: '1 1 auto' },
      vertical: {
        display: 'flex',
        flexFlow: 'column nowrap',
        fontFamily: 'Roboto, sans-serif',
        fontSize: '16px',
        height: '100%',
      },
    };
  }

  render() {
    const toolbarHeight = 50;

    return (
      <div style={this.styles.vertical}>
        <Toolbar height={toolbarHeight} />
        <div style={this.styles.horizontal}>
          <MapContainer height={toolbarHeight} />
          <div style={this.styles.spacer}></div>
          <PanelFeature />
          <PanelMarkers />
          <PanelLayers />
          <PanelTraces />
          <PanelGroups />
          <PanelSettings />
        </div>
      </div>
    );
  }

}

componentWillMount