// 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';
    });
  }
});

// manage list
document.getElementById("manage_list").addEventListener("click", function () {
            manageListPopup.style.display = 'flex';
        });

// 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';
        });

// modify list

// delete list
document.getElementById("delete_list").addEventListener("click", function () {
      // remove div content
      const node = document.getElementById("checkbox-container2");
      while (node.firstChild) {
          node.removeChild(node.lastChild);
      }

      // generate new checkboxes
      const checkboxContainer = d3.select("#checkbox-container2");
      fetch_list().then(function(data){
          for (const itemlist of data) {
            const div = checkboxContainer.append("div");
            var label = div.append("label");
            var input = label.append("input")
                            .attr("type", "checkbox")
                            .attr("class", "checkbox-delete-list")
                            .attr("id", `checkbox-${itemlist.uuid}`);
            label.append("span")
                .text(`${itemlist.name}`);
            div.append("br");
          }

      })
      deleteListPopup.style.display = 'flex';
});
// confirm delete list
document.getElementById("delete_list_ok").addEventListener("click", function () {
            const checked_delete = getCheckedCheckboxIds('.checkbox-delete-list');
            const id_array = checked_delete.map(str => str.substring(9));
            for (const uuid of id_array) {
              delItemlist(uuid);
            }
            // refresh filters checkboxes
            filters_checkboxes();
            deleteListPopup.style.display = 'none';
        });
// cancel list delete
document.getElementById("delete_list_cancel").addEventListener("click", function () {
            deleteListPopup.style.display = 'none';
        });

// modify list popup
document.getElementById("modify_list").addEventListener("click", function () {
      generate_modifylist_buttons();
      //
      modifyListPopup.style.display = 'flex';
});
function generate_modifylist_buttons() {
    // remove div content
      const node = document.getElementById("modify_itemlist_choice");
      while (node.firstChild) {
          node.removeChild(node.lastChild);
      }
      fetch_list().then(function(data){
          let div = document.getElementById("modify_itemlist_choice");
          for (const itemlist of data) {
              // Create new button
              var li = document.createElement("li");
              var button = document.createElement("button");
              button.setAttribute("class", "dropdown-item");
              button.setAttribute("type", "button");
              button.setAttribute("id", `modify-${itemlist.uuid}`);
              button.addEventListener("click", function() {
                  toggle_modify(itemlist.uuid);
              });
              button.textContent = `${itemlist.name}`;
              li.appendChild(button);
              div.appendChild(li);
          }
      });
}
async function toggle_modify(itemlist_uuid) {
      //   <div id="modifylist_content">
      // <input id="listName" type="text" placeholder="name">
      //     <input id="listDescription" type="text" placeholder="description">
      //     <button id="create_list_add" type="button" class="btn btn-secondary">add</button>
      //     <button id="create_list_cancel" type="button" class="btn btn-secondary">cancel</button>
      //     <p>Include items</p>
      //     <div id="checkbox-container"></div>
      // remove div content
      const node = document.getElementById("modifylist_content");
      while (node.firstChild) {
          node.removeChild(node.lastChild);
      }
      // input name
      // input description
      // content
      const existing_content = Object.keys(await fetch_item_filtered([itemlist_uuid]));
      const modify_content = d3.select("#modifylist_content");
      const checkboxContainer = modify_content.append("div");
      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}`);
          if (existing_content.includes(`${uuid}`)) {
              checkbox.property("checked", true);
          }
          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}`);
          });
      });
}

// 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';
  });
});