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

// 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", async function () {
            const checked_delete = getCheckedCheckboxIds('.checkbox-delete-list');
            const id_array = checked_delete.map(str => str.substring(9));
            for (const uuid of id_array) {
              await 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
var previous_modify = Object();
document.getElementById("modify_list").addEventListener("click", function () {
      generate_modifylist_buttons();
      //
      modifyListPopup.style.display = 'flex';
});
// cancel list modify
document.getElementById("modifylist_cancel").addEventListener("click", function () {
            modifyListPopup.style.display = 'none';
        });
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) {
      // remove div content
      const node = document.getElementById("modifylist_content");
      while (node.firstChild) {
          node.removeChild(node.lastChild);
      }
      // new content
      previous_modify.uuid = itemlist_uuid;
      const existing_content = Object.keys(await fetch_item_filtered([itemlist_uuid]));
      previous_modify.content = existing_content;
      const list_data = await get_list_details(itemlist_uuid);
      const modify_content = d3.select("#modifylist_content");
      // dropdown menu text
      document.getElementById("modify_itemlist_dropdown").innerHTML = `${list_data.name}`;
      // input name
      previous_modify.name = list_data.name;
      const input_name = modify_content.append("input")
                                      .attr("type", "text")
                                      .attr("placeholder", "name")
                                      .attr("value", `${list_data.name}`)
                                      .attr("id", `input_name-${itemlist_uuid}`);
      // input description
      const input_description = modify_content.append("input")
                                      .attr("type", "text")
                                      .attr("placeholder", "description")
                                      .attr("value", `${list_data.description}`)
                                      .attr("id", `input_description-${itemlist_uuid}`);
      previous_modify.description = list_data.description;
      // content
      const checkboxContainer = modify_content.append("div")
                                              .attr("class", "item_checkboxes");
      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-modify-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}`);
          });
      });
}
// confirm list modify
document.getElementById("modifylist_ok").addEventListener("click", async function () {
            const uuid = previous_modify.uuid;
            const new_name = document.getElementById(`input_name-${uuid}`).value;
            const new_description = document.getElementById(`input_description-${uuid}`).value;
            const checked = getCheckedCheckboxIds('.checkbox-modify-itemlist');
            const new_content = checked.map(str => str.substring(9));
            var diff = false;
            if (new_name != previous_modify.name) {
              // name different
              diff = true;
              await changeListName(uuid, new_name);
            }
            if (new_description != previous_modify.description) {
              // description different
              diff = true;
              await changeListDescription(uuid, new_description);
            }
            if (!(new_content.every(item => previous_modify.content.includes(item)) && previous_modify.content.every(item => new_content.includes(item)))) {
              // content different
              diff = true;
              await changeListContent(uuid, new_content);
            }
            if (diff) {
              // refresh filters checkboxes
              filters_checkboxes();
            }
            modifyListPopup.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';
  });
});