import React, {Profiler} from "react";
import MapGL from "./../maps/MapGL";
import {measureTime} from './../helpers/measureTime';
import {CustomInput, Input} from "reactstrap";
import {mapTestState} from "./../config/variables"
import {
  createRandomMarkers,
  calcMarkerPosition,
  changeSwitch,
  setNoOfMarkers
} from "./../helpers/randomMarkers";
import {
  didMountSwitchLatLng,
  componentDidUpdate,
  componentWillUnmount
} from "./../helpers/testLifecycle"


export default class MapGLs extends React.Component{
  constructor(props) {
    super(props)
    this.state = mapTestState

    this.measurementsDiv = React.createRef()
    this.markerInfoDiv = React.createRef()

    this.createRandomMarkers = createRandomMarkers.bind(this)
    this.calcMarkerPosition = calcMarkerPosition.bind(this)
    this.changeSwitch = changeSwitch.bind(this)
    this.setNoOfMarkers = setNoOfMarkers.bind(this)

    this.componentDidUpdate = componentDidUpdate.bind(this)
    this.componentWillUnmount = componentWillUnmount.bind(this)
  }

  componentDidMount() {
    didMountSwitchLatLng(this, true)
  }

  render(){
    return (
      <div className="mapTestContainer">

        <div className="mapTime">
          <CustomInput type="switch" onChange={this.changeSwitch} id="exampleCustomSwitch" name="customSwitch" label="Move markers" />
          <div ref={this.markerInfoDiv}>
            <span>{this.state.currStep} steps</span>
          </div>
          <span>Number of Markers: {this.state.noOfMarkers}</span><br/>
          <Input type="text" onChange={(e) => this.setNoOfMarkers(e, true)} value={this.state.noOfMarkers}/>

          <div ref={this.measurementsDiv}>
          </div>
        </div>

        <div className="mapTest">
          <Profiler id="mapgl" onRender={measureTime(this)}>
            <MapGL markers={this.state.markers}/>
          </Profiler>
        </div>

      </div>
    );
  }
}