import { useState } from "react"

// App Component
function App() {
  // Declaring two state objects `formData` and `showMessage`
  // formData keeps track of all form elements and their changes
  // showMessage when set to `true` renders a message to the user upon form submission
  const [formData, setFormData] = useState( { username: localStorage.getItem("username") || "" } )
  const [showMessage, setShowMessage] = useState(false)

  const handleChange = (event) => {
    setShowMessage(false)

    const { value, name } = event.target

    setFormData((prevValues) => {
      return {
        ...prevValues, 
        [name]: value
      }
    })
  }

  const handleSubmit = (event) => {
    event.preventDefault()

    // saving the `username` to localStorage using the key `username`
    localStorage.setItem("username", formData.username)

    // setting state here to true will render a message to the user
    setShowMessage(true)
  }

  return (
    <div className="App">
      <h1>Local Storage</h1> 

      <form>
        <div>
          <input onChange={handleChange} type="text" placeholder="enter your username" name="username" value={formData.username}/>
        </div>
        <br />
        <div>
          <button type="button" onClick={handleSubmit}>Submit</button>
        </div>
      </form>

      {/* Using conditional rendering to show a message to the user upon form submission */}
      {
        showMessage &&
        <p>Thanks, <b>@{formData.username}</b> for using local storage. Your usename is now stored in the Browser.</p>
      }
    </div>
  )
}

export default App