// close popups with escape key
document.addEventListener("keydown", (event) => {
  if (event.isComposing || event.key === 'Escape') {
    Array.from(document.getElementsByClassName("popup")).forEach(function(x) {
        x.style.display = 'none';
    });
  }
});

// create new list
document.getElementById("create_list").addEventListener("click", function () {
            // remove div content
            const node = document.getElementById("checkbox-container");
            while (node.firstChild) {
                node.removeChild(node.lastChild);
            }

            // generate new checkboxes
            const checkboxContainer = d3.select("#checkbox-container");
            fetch_item().then(function(data){
                Object.keys(data).forEach(uuid => {
                const item = data[uuid];
                const div = checkboxContainer.append("div");

                const checkbox = div.append("input")
                    .attr("type", "checkbox")
                    .attr("class", "checkbox-itemlist")
                    .attr("id", `checkbox-${uuid}`);

                const link = `https://fr.aliexpress.com/item/${item.itemid}.html`;
                const image = div.append("img")
                    .attr("src", item.image)
                    .attr("width", height*0.4)
                    .attr("height", height*0.4)
                    .on("click", function() {
                        window.open(link, '_blank', 'noopener,noreferrer');
                    })
                    .attr("alt", `Image ${uuid}`);
                });
            })
            createListPopup.style.display = 'flex';
        });
// cancel list creation
document.getElementById("create_list_cancel").addEventListener("click", function () {
            createListPopup.style.display = 'none';
        });


// delete item, pop-up confirm
document.addEventListener('DOMContentLoaded', function () {
  const yesBtn = document.getElementById('yesBtn');
  const noBtn = document.getElementById('noBtn');
  yesBtn.addEventListener('click', function () {
    delItem(confirmationPopup.style.name);
    confirmationPopup.style.display = 'none';
  });
  noBtn.addEventListener('click', function () {
    confirmationPopup.style.display = 'none';
  });
});