const button = document.querySelector('#nasaimagesearch');
const clearbutton = document.querySelector('#clearsearches');
const searchStorage = window.localStorage;

function grabitems(collection) {
  const { items } = collection; // collection.collection.STUFF
  // console.log(items.length);
  items.forEach((item) => {
    const image = item.links[0].href;
    const collectionjson = item.href;
    fetch(collectionjson).then((r) => { // fetch collection.json file from nasa api
      if (r.status === 200) {
        return r.json();
      }
      throw new Error(`return status is ${r.status}`);
    }).then((jsonfile) => {
      // grab metadatajson file from collectionjson
      const metadatajson = jsonfile[jsonfile.length - 1];
      return fetch(metadatajson)
    }).then((res) => { // fetch metadatajson file
      if (res.status === 200) {
        return res.json();
      }
      throw new Error(`return status bad ${res.status}`);
    })
      .then((metdjson) => {
      // console.log(metdjson);
      // console.log(metdjson["AVAIL:Description"]);
        const descriptions = metdjson['AVAIL:Description'];
        const titles = metdjson['AVAIL:Title'];
        const nasaid = metdjson['AVAIL:NASAID'];

        const li = document.createElement('LI');
        const img = li.appendChild(document.createElement('img'));
        img.outerHTML = `<img src="${image}" width="100" height="100;"/>`;
        document.getElementById('follows').appendChild(li);
        img.addEventListener('mouseover', () => {
          alert(descriptions);
          alert(titles);
        })
      })
  })
}

function searchImages(keyword) {
  fetch(`https://images-api.nasa.gov/search?q=${keyword}&media_type=image`).then((r)=>{
    if (r.status === 200) {
      return r.json();
    }
    throw new Error(`return status is ${r.status}`);
  }).then((json)=>{
    grabitems(json.collection); // grabs top collection
  })
}

clearbutton.addEventListener('click', () => {
  searchStorage.clear();
});

button.addEventListener('click', () => {
  const inp = document.getElementById('thingtosearch');
  if (!searchStorage.getItem('search')) {
    searchStorage.setItem('search', inp.value);
  }
  searchImages(inp.value);
});