// const modal = document.querySelector("dialog");
const showModalBtns = document.querySelectorAll(".show-modal");
const closeModalBtns = document.querySelectorAll(".close-modal");
const clipboard = document.querySelector("#copy-ingredients");

if(clipboard) {
  clipboard.addEventListener("click", () => {

    // Copy data to clipboard
    const ingredientsContent = document.querySelector("#ingredients").textContent.trim();
    const contentArr = ingredientsContent.split("\n");
    const ingredientsString = contentArr.map((el) => {
       if(el.trim() == "") return;
       else return el.trim();
    }).join("\n")
    navigator.clipboard.writeText(ingredientsString);

    // Show success message momentarily
    clipboard.parentElement.insertAdjacentHTML("afterend", "<span id='copied-message'> ingredients copied!</span>");
  
    setTimeout(() => {
       document.querySelector("#copied-message").remove(); 
    }, 2000)
  })
}


// Open and close modals on /account page
if(showModalBtns){
  showModalBtns.forEach((btn) => {
    btn.addEventListener("click", () => {

      // Open dialog box
      btn.nextElementSibling.showModal();

    })
  })
}

if(closeModalBtns){
  closeModalBtns.forEach((btn) => {
    btn.addEventListener("click", () => {

      // Open dialog box
      btn.parentNode.close();

    })
  })
}