export async function loadEvents(){
  const eventList = document.querySelectorAll('#eventSection > article');
  //console.log("event list: ", eventList);

  for (const event of eventList){
    const title = event.querySelector('h4');
    const date = event.querySelector('p.date');
    const posterLink = event.querySelector('a.iconBtnStyle').href;
    const posterHTML = await getPoster(posterLink);

    const poster = posterHTML.querySelector('body > article');

    const posterStyle = posterHTML.querySelectorAll('head > style:not([data-import="no-import"])')

    //console.log('entry data :', title, date, poster, posterStyle);

    const selectedEntry = createEntry(title, date, poster, posterStyle)

    //console.log('created new details :', selectedEntry);

    event.replaceChildren(selectedEntry);
  }
}

async function getPoster(link){
  const res = await fetch(link);
  if (res.ok){
      const html_text = await res.text()
      const html = new DOMParser().parseFromString(html_text, "text/html");
        return html
    } else{
      console.log('error 333: something went wrong with this poster...');
        return
    }

}

function createEntry(title, date, html, style){
  const newEntry = document.createElement('details');
  const newSummary = document.createElement('summary');
  newSummary.append(title, date);

  newEntry.append(newSummary);

  newEntry.append(html);

  newEntry.name = "eventList"

  for(const el of style){
    document.head.append(el);
  }

    return newEntry
}