import React, { useState, useEffect, useRef } from 'react'
import randomColor from 'randomcolor'

export default function Playground() {
  const [count, setCount] = useState(30)
  
  const inputRef = useRef()
  
  const [color, setColor] = useState(randomColor())
  useEffect(() => inputRef.current.focus(), [count])
  
  return (
    <div style={{ borderTop: `10px solid ${color}`}}>
      {count}
      <button onClick={() => setCount(currentCount => currentCount - 1)}>-</button>
      <button onClick={() => setCount(currentCount => currentCount + 1)}>+</button>
      <button onClick={() => setColor(randomColor())}>Change Color</button>
      <hr />
      <input ref={inputRef} type="range" onChange={e => setCount(e.target.value)} value={count} />
    </div>
  )
}

function Calculate(num) {
  // first call, num === 3... ok I will calculate that
  return fetchComplicatedAlgorithmToAdd47(3) // returns 50 after awhile
  
  // second call, num === 5... ok I guess I have to calculate that too
  return fetchComplicatedAlgorithmToAdd47(5) // returns 52 after awhile
  
  // third call, num === 3... WAIT, I've seen this before! I know this one!
  return 50 // immediately
}