import React, { PureComponent, PropTypes } from 'react'
import Perf from 'react-addons-perf'

class PerfProfiler extends PureComponent {

state = {
  isStarted: false,
  isMinimized: this.props.minimized,
}

toggle = () => {
  const { isStarted } = this.state

this.setState({
  isStarted: !isStarted,
}, () => {
   if (isStarted) { Perf.stop() }
   else { Perf.start() }
  })
}

toggleContent = () => {
  const { isMinimized } = this.state
  this.setState({
    isMinimized: !isMinimized,
  })
}

printWasted = () => {
  const lastMeasurement = Perf.getLastMeasurements()
  return Perf.printWasted(lastMeasurement)
}

printOperations = () => {
  const lastMeasurement = Perf.getLastMeasurements()
  return Perf.printOperations(lastMeasurement)
}

printExclusive = () => {
  const lastMeasurement = Perf.getLastMeasurements()
  return Perf.printExclusive(lastMeasurement)
}

printInclusive = () => {
  const lastMeasurement = Perf.getLastMeasurements()
  return Perf.printInclusive(lastMeasurement)
}

render() {
  const { position, className } = this.props
  const { isMinimized } = this.state
  return (
    <div className={`perf-profiler ${position} ${className}`}>
      <div className="min-button-container">
        <button onClick={this.toggleContent}>_</button>
      </div>
      <div className={`buttons-container ${isMinimized ? 'hidden' :
''}`}>
      <button className="toggle-button" onClick={this.toggle}>
        {this.state.isStarted ? 'Stop' : 'Start'}
      </button>
      <button onClick={this.printWasted}>Print Wasted</button>
      <button onClick={this.printOperations}>Print Operations</button>
      <button onClick={this.printInclusive}>Print Inclusive</button>
      <button onClick={this.printExclusive}>Print Exclusive</button>
    </div>
  </div>)}
}
export default PerfProfiler

.perf-profiler {

display: flex;
flex-direction: column;
position: absolute;
border: 1px solid;
padding: 20px;
background-color: rgba(#ffffff, 0.8);
z-index: 10;

&.top-left {
  left: 0;
  top: 0;
}

&.top-right {
  right: 0;
  top: 0;
}

&.bottom-left {
  bottom: 0;
  left: 0;
}

&.bottom-right {
  bottom: 0;
  right: 0;
}

&.center {
  top: 50%;
  left: 50%;
}

.toggle-button {
  margin-left: 0.5em;
}

.min-button-container {
  display: flex;

  flex: 1;
  justify-content: flex-end;
}

.buttons-container {
  display: flex;
  flex-direction: column;
}

.hidden {
  display: none;
}
}