/*
Let's break down this app in small and
simple functions, then bring them all
together to write an easy to read
logical piece of code
*/

const getChat = () =>
  document
    .getElementById('chat')

const getChatInput = () =>
  document
    .querySelector('#chat input[type="text"]')

const getChatMessage = () =>
  getChatInput().value

const resetChatInput = () => {
  const input = getChatInput()
  input.value = ''
  input.focus()
}

/*
The following 4 functions are
"PURE FUNCTIONS"

What does that mean?
Why are "pure functions" important?
*/

const messageIsValid = text =>
  text.length > 0

const sendMessage = text =>
  alert(`Send: ${text}`)

const showError = () =>
  alert('Please type the message you want to sent')

const cancelEvent = (event) => {
  event.preventDefault()
  event.stopPropagation()
}

/*
Finally, we can write the event handler
as a simple list of smaller functions
*/
const onFormSubmit = (event) => {
  cancelEvent(event)
  
  const message = getChatMessage()
  
  // the ternary conditional operator
  // works exceptionally well with
  // custom functions names.
  //
  // when you choose good names,
  // you can almost read your code as
  // it was plain english.
  //
  // it makes it dramatically easy to
  // spot logical mistakes
  messageIsValid(message)
    ? sendMessage(message)
    : showError()

  resetChatInput()
}

getChat().addEventListener('submit', onFormSubmit)