import React, { useState } from 'react'
import ReactDOM from 'react-dom'
const Statistics = (props) => {
  if (props.allClicks.length === 0) {
    return (
      <div>
      do something to get stats
      </div>
    )
  }
  return (
    <div>  <p>good{props.allClicks.good} neutral={props.allClicks.neutral} bad={props.allClicks.bad}</p>
    <p> total={props.allClicks.good + props.allClicks.neutral + props.allClicks.bad}</p>
    <p>average={props.allClicks.average / (props.allClicks.good + props.allClicks.neutral + props.allClicks.bad)} </p>
    <p>positive={(props.allClicks.good) / (props.allClicks.good + props.allClicks.neutral + props.allClicks.bad) * 100} %</p>
    </div>
  );
}

const App = () => {
  // save clicks of each button to its own state

  const [allClicks, setAll] = useState([])
  const [clicks, setClicks] = useState({
    good: 0, neutral: 0, bad: 0, average:0
  })

  const handleGoodClick = () => {
    const newClicks = {
      good: clicks.good + 1,
      neutral: clicks.neutral,
      bad: clicks.bad,
      average: clicks.average + 1
    }
    setAll(allClicks.concat('+1'))
    setClicks(newClicks)
  }
  const handleBadClick = () => {
    const newClicks = {
      good: clicks.good,
      neutral: clicks.neutral,
      bad: clicks.bad + 1,
      average: clicks.average - 1
    }
    setAll(allClicks.concat('-1'))
    setClicks(newClicks)
  }
  const handleNeutralClick = () => {
    const newClicks = {
      good: clicks.good,
      neutral: clicks.neutral + 1,
      bad: clicks.bad,
      average: clicks.average
    }
    setClicks(newClicks)
    setAll(allClicks.concat('0'))
  }




  return (
    <div className='Statistics'>
      <h1>give feedback</h1>
      <button onClick={handleGoodClick}>
      good
      </button>
      <button onClick={handleNeutralClick}>
      neutral
      </button>
      <button onClick={handleBadClick}>
      bad
      </button>
      <Statistics allClicks={allClicks} />

        </div>




  )
}

ReactDOM.render(<App />,
  document.getElementById('root')
)