export async function loadEvents(){
  let eventList = document.querySelectorAll('#eventSection > article');
  //console.log("event list: ", eventList);
  
  for (let event of eventList){
    let title = event.querySelector('h4');
    let date = event.querySelector('p.date');
    let posterLink = event.querySelector('a.iconBtnStyle').href;
    let posterHTML = await getPoster(posterLink);

    let poster = posterHTML.querySelector('body > article');
    
    let posterStyle = posterHTML.querySelectorAll('head > style:not([data-import="no-import"])')

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

    let selectedEntry = createEntry(title, date, poster, posterStyle)
    
    console.log('created new details :', selectedEntry);

    event.replaceChildren(selectedEntry);
  }

  /* let btnList = document.querySelectorAll('.eventEntry > .iconBtnStyle');

  //console.log("source buttons : ", btnList)

  let displayWindow = document.querySelector('#posterWindow');

  let displayContainer = document.querySelector('#posterContainer');

  let closeBtn = document.querySelector('#posterCloseBtn');

  closeBtn.addEventListener('mousedown', () => {
    displayWindow.style.visibility  = 'collapse';
    displayContainer.replaceChildren();
  })

  closeBtn.addEventListener('touchstart', () => {
    displayWindow.style.visibility  = 'collapse';
    displayContainer.replaceChildren();
  })

  async function getPoster(src){
    let res = await fetch(src);
    if (res.ok){
      let html_text = await res.text()
      let html = new DOMParser().parseFromString(html_text, "text/html");
        return html
    } else{
      console.log('error 333');
        return
    }
  }

  let eventList = [];

  if( btnList.length > 0 ){
    for (let btn of btnList ){
      let link = btn.children[0];
      link.style.pointerEvents = 'none';

      //console.log(link.href);

      let posterPage = await getPoster(link.href);

      //console.log('selected poster: ', posterPage)

      let titleData = posterPage.querySelector('title');
      //console.log(titleData);

      let styleList = Array.from(posterPage.querySelectorAll('head > style'));
      //console.log(styleList)

      styleList.splice(0,1);
      //console.log(styleList)

      eventList.push(
        {
          content: posterPage.querySelector('main'),
          title: titleData.innerText,
          stylesheet: styleList,
          sourceBtn: btn
        }
      );
    }
  }

  //console.log("event list : ", eventList);

  if (eventList.length > 0){

    eventList.forEach( (obj) =>{
      let btn = obj.sourceBtn;
      let content = obj.content;
      let title = obj.title;
      for (let style of obj.stylesheet){
        document.head.append(style);
      }
      btn.addEventListener( 'click', () => {
        //console.log("selection :", content)
        displayWindow.style.visibility = 'visible';
        let targetTitle = displayWindow.querySelector('h4');
        targetTitle.innerText = title;
        displayContainer.replaceChildren(content);
      })
    })
  } */
}

async function getPoster(link){
  let res = await fetch(link);
  if (res.ok){
      let html_text = await res.text()
      let html = new DOMParser().parseFromString(html_text, "text/html");
        return html
    } else{
      console.log('error 333');
        return
    }

}

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

  newEntry.append(newSummary);

  newEntry.append(html);

  newEntry.name = "eventList"

  for(let el of style){
    document.head.append(el);
  }
   
    return newEntry
}