import React, { useState } from 'react';
import ReactDOM from 'react-dom';

// I AM REACT

let element = CharacterCounterInput()
let domTable = {}
domTable.add(element)

let oldElement = element
element = CharacterCounterInput() // new state
diff(element, oldElement)

commit(diff)

CharacterCounterInput()
CharacterCounterInput()
CharacterCounterInput()
CharacterCounterInput()
CharacterCounterInput()

const CharacterCounterInput = ({ text, defaults }) => {
  const [message, setMessage] = useState('')
  const [error, setError] = useState(false)
  const maxLength = 20
  
  return <div className={`counterInput ${message.length > maxLength ? "tooLong" : ""}`}>
    <div>
      {defaults.map((b) => {
        return <button key={b} onClick={() => {
          setMessage(b)
        }}>{b}</button>
      })}
    </div>
    <textarea
      placeholder={text}
      value={message}
      onChange={(event) => {
        setMessage(event.target.value)
        if (message.length > maxLength) {
          setError(true)
        } else {
          setError(false)
        }
      }}
    />
    <div>{message.length}/{maxLength}</div>
  </div>
}

const App = () => {
  let defaultMoods = ["Great", "Okay", "Bad", "TERRIBLE"]
  
  return (
    <section>
      <h2>Mood Tracker</h2>
      <CharacterCounterInput text={"How was your day?"} defaults={defaultMoods}/>
    </section>
  )
}

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