import React from 'react';
import ReactPlannerViewer from 'react-planner-viewer';
import ContainerDimensions from 'react-container-dimensions';
import ReactDOM from 'react-dom';
import floorplan from './floorplan.json';

//render
ReactDOM.render(
  (
    <ContainerDimensions>
      {({ width, height }) =>
        <ReactPlannerViewer
          width={width}
          height={height}
          heatMapColors={['white','blue']}
          scene={floorplan}
          onSelectArea={(areaName) => { console.log(areaName) }}
          heatMapValues={[
            { name: 'A', value: 0 },
            { name: 'B', value: 100 },
            { name: 'C', value: 200 },
            { name: 'D', value: 350 },
            { name: 'E', value: 230 },
            { name: 'F', value: 432 },
            { name: 'G', value: 500 },
            { name: 'G', value: 578 },

        ]}
        />
      }
    </ContainerDimensions>
  ),

  document.getElementById('app')
);