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


export default class Googles 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.componentDidMount = componentDidMount.bind(this)
    this.componentDidUpdate = componentDidUpdate.bind(this)
    this.componentWillUnmount = componentWillUnmount.bind(this)
  }

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

        <div className="mapTime">
          <CustomInput type="switch" onChange={this.changeSwitch} id="moveSwitch" name="moveSwitch" 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={this.setNoOfMarkers} value={this.state.noOfMarkers}/>

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

        <div className="mapTest">
          <Profiler id="google" onRender={measureTime(this, this.state.noOfMarkers)}>
            <Google markers={this.state.markers}/>
          </Profiler>
        </div>

      </div>
    );
  }
}