import React, {Component} from 'react';
import {readableInteger} from '../../utils/format-utils';
import {App, INITIAL_VIEW_STATE} from 'website-examples/3d-heatmap/app';

import {MAPBOX_STYLES, DATA_URI} from '../../constants/defaults';

export default class HeatmapDemo extends Component {

  static get data() {
    return {
      url: `${DATA_URI}/heatmap-data.txt`,
      worker: 'workers/heatmap-data-decoder.js'
    };
  }

  static get parameters() {
    return {
      radius: {displayName: 'Radius', type: 'range', value: 2000, step: 100, min: 500, max: 20000},
      coverage: {displayName: 'Coverage', type: 'range', value: 0.7, step: 0.1, min: 0, max: 1},
      upperPercentile: {displayName: 'Upper Percentile',
        type: 'range', value: 100, step: 0.1, min: 80, max: 100}
    };
  }

  static get viewport() {
    return INITIAL_VIEW_STATE;
  }

  static get mapStyle() {
    return MAPBOX_STYLES.DARK;
  }

  static renderInfo(meta) {

    const colorRamp = App.defaultColorRange.slice()
      .map(color => `rgb(${color.join(',')})`);

    return (
      <div>
        <h3>United Kingdom Road Safety</h3>
        <p>Personal injury road accidents in GB from 1979</p>
        <p>The layer aggregates data within the boundary of each hexagon cell</p>

        <div className="layout">
          {colorRamp.map((c, i) => (
            <div key={i}
                 className="legend"
                 style={{background: c, width: `${100 / colorRamp.length}%`}} />
          ))}
        </div>
        <p className="layout">
          <span className="col-1-2">Fewer Accidents</span>
          <span className="col-1-2 text-right">More Accidents</span>
        </p>

        <p>Data source: <a href="https://data.gov.uk">DATA.GOV.UK</a></p>

        <div className="layout">
          <div className="stat col-1-2">
            Accidents<b>{ readableInteger(meta.count) || 0 }</b>
          </div>
        </div>
      </div>
    );
  }

  constructor(props) {
    super(props);

    this.state = {
      hoveredObject: null
    };
  }

  _onHover({x, y, object}) {
    this.setState({x, y, hoveredObject: object});
  }

  _renderTooltip() {
    const {x, y, hoveredObject} = this.state;

    if (!hoveredObject) {
      return null;
    }

    const lat = hoveredObject.centroid[1];
    const lng = hoveredObject.centroid[0];
    const count = hoveredObject.points.length;

    return (
      <div className="tooltip"
           style={{left: x, top: y}}>
        <div>{`latitude: ${Number.isFinite(lat) ? lat.toFixed(6) : ''}`}</div>
        <div>{`longitude: ${Number.isFinite(lng) ? lng.toFixed(6) : ''}`}</div>
        <div>{`${count} Accidents`}</div>
      </div>
    );
  }

  render() {
    const {data, params} = this.props;

    return (
      <div>
        {this._renderTooltip()}
        <App
          {...this.props}
          data={data}
          radius={params.radius.value}
          upperPercentile={params.upperPercentile.value}
          coverage={params.coverage.value}
          onHover={this._onHover.bind(this)}
        />
      </div>
    );
  }
}

@@ -285,17 +285,16 @@
 onent %7B%0A
-%0A
   static
@@ -681,24 +681,33 @@
 ercentile: %7B
+%0A        
 displayName:
@@ -741,32 +741,40 @@
   type: 'range',
+%0A       
  value: 100, ste
@@ -769,16 +769,24 @@
 ue: 100,
+%0A       
  step: 0
@@ -784,24 +784,32 @@
   step: 0.1,
+%0A       
  min: 80, ma
@@ -805,16 +805,24 @@
 min: 80,
+%0A       
  max: 10
@@ -822,16 +822,23 @@
 max: 100
+%0A      
 %7D%0A    %7D;
@@ -995,17 +995,16 @@
 meta) %7B%0A
-%0A
     cons
@@ -1046,23 +1046,16 @@
 .slice()
-%0A      
 .map(col
@@ -1389,16 +1389,30 @@
     %3Cdiv
+%0A             
  key=%7Bi%7D
@@ -1412,19 +1412,16 @@
 key=%7Bi%7D%0A
-   
         
@@ -1445,19 +1445,16 @@
 legend%22%0A
-   
         
@@ -1519,16 +1519,28 @@
 gth%7D%25%60%7D%7D
+%0A           
  /%3E%0A    
@@ -1748,16 +1748,27 @@
      %3Cp%3E
+%0A          
 Data sou
@@ -1817,16 +1817,25 @@
 V.UK%3C/a%3E
+%0A        
 %3C/p%3E%0A%0A  
@@ -1931,13 +1931,25 @@
 ents
+%0A            
 %3Cb%3E%7B
- 
 read
@@ -1976,17 +1976,16 @@
 nt) %7C%7C 0
- 
 %7D%3C/b%3E%0A  
@@ -2372,24 +2372,24 @@
 dObject.
-centroid
+position
 %5B1%5D;%0A   
@@ -2419,16 +2419,16 @@
 ect.
-centroid
+position
 %5B0%5D;
@@ -2519,27 +2519,16 @@
 tooltip%22
-%0A          
  style=%7B

Fix heatmap demo in website (#2927)