const fetchData = async () => {
  // The first arg to the Axios.get func is going to be the URL
  // we want to retrieve whenever we make a network request that is
  // an asynchronous operation and we essentially have to wait before
  // we get some kind of response to continue running the lines of code
  // directly underneath and that's why we have the (await) keyword

  // We're going to eventually get back a response object that is an
  // object that represents all the information related to this request
  // in response we just made. And inside of that response object is
  // the data that we should be getting back from our API
  const response = await axios.get('http://www.omdbapi.com/', {
    // Automated functionality inside of Axios second argument object
    // inside of this, we're going to list out all the different
    // query string paramenters that we want to pass along with the
    // request and appended to the end of that URL
    params: {
      apikey: apikey,
      s: 'avengers',
    },
  })

  console.log(response.data)
}

fetchData()

// Helper function ID
const fetchData = async () => {
  const response = await axios.get('http://www.omdbapi.com/', {
    params: {
      apikey: apikey,
      i: 'tt0848228',
    },
  })

  console.log(response.data)
}

fetchData()

const input = document.querySelector('input')
input.addEventListener('input', (event) => {
  // Whatever the user just typed into that input
  fetchData(event.target.value)
})

setTimeout(() => {
  console.log('hi there')
}, 10000)

clearTimeout(1)

const input = document.querySelector('input')

let timeoutId
const onInput = (event) => {
  if (timeoutId) {
    clearTimeout(timeoutId)
  }
  timeoutId = setTimeout(() => {
    // Whatever the user just typed into that input
    fetchData(event.target.value)
  }, 1000)
}
input.addEventListener('input', onInput)

const input = document.querySelector('input')

const debounce = (func, delay = 1000) => {
  let timeoutId
  return (...arg) => {
    if (timeoutId) {
      clearTimeout(timeoutId)
    }
    timeoutId = setTimeout(() => {
      func.apply(null, arg)
    }, delay)
  }
}

const onInput = (event) => {
  fetchData(event.target.value)
}
input.addEventListener('input', debounce(onInput, 1000))

const onInput = async (event) => {
  const movies = await fetchData(event.target.value)
  console.log(movies);
  }
}

const onInput = async (event) => {
  const movies = await fetchData(event.target.value)

  for (let movie of movies) {
    const div = document.createElement('div')

    div.innerHTML = `
      <img src="${movie.Poster}" />
      <h1>${movie.Title}</h1>
    `

    document.querySelector('#target').appendChild(div)
  }
}

const fetchData = async (searchTerm) => {
  const response = await axios.get('http://www.omdbapi.com/', {
    params: {
      apikey: apikey,
      s: searchTerm,
    },
  })
  // If there is an error, let's just return an empty array and essentially say
  // we didn't get any movies whatsoever to show to the user
  if (response.data.Error) {
    return []
  }

  return response.data.Search
}

root.innerHTML = `
  <label><b>Search For a Movie</b></label>
  <input class="input" />
  <div class="dropdown is-active">
    <div class="dropdown-menu">
      <div class="dropdown-content results"></div>
    </div>
  </div>
`

const onInput = async (event) => {
  const movies = await fetchData(event.target.value)

  dropdown.classList.add('is-active')
  for (let movie of movies) {
    const option = document.createElement('a')

    option.classList.add('dropdown-item')
    option.innerHTML = `
      <img src="${movie.Poster}" />
      ${movie.Title}
    `

    resultsWrapper.appendChild(option)
  }
}

const imSrc = movie.Poster === 'N/A' ? '' : movie.Poster

document.addEventListener('click', (event) => {
  console.log(event.target)
  // Removes the dropdown when we click outside the dropdown
  if (!root.contains(event.target)) {
    dropdown.classList.remove('is-active')
  }
})

if (!movies.length) {
  dropdown.classList.remove('is-active')
  return
}

option.addEventListener('click', () => {
  dropdown.classList.remove('is-active')
  input.value = movie.Title
})

const onMovieSelect = async (movie) => {
  console.log(movie)

  const response = await axios.get('http://www.omdbapi.com/', {
    params: {
      apikey: apikey,
      i: movie.imdbID,
    },
  })

  console.log(response.data)
}

const movieTemplate = (movieDetail) => {
  return `
    <article class="media">
      <figure class="media-left">
        <p class="image">
          <img src="${movieDetail.Poster}" />
        </p>
      </figure>
      <div class="media-content">
        <div class="content">
          <h1>${movieDetail.Title}</h1>
          <h4>${movieDetail.Genre}</h4>
          <p>${movieDetail.Plot}</p>
        </div>
      </div>
    </article>
  `
}

let count = 0
const awards = movieDetail.Awards.split(' ').forEach((word) => {
  const value = parseInt(word)

  if (isNaN(value)) {
    return
  } else {
    count = count + value
  }
})
console.log(count)

// Both return same result
document.querySelector('#left-summary').querySelector('.notification')
document.querySelector('#left-summary .notification')