import { Dropdown } from "bootstrap";

function selectDestinationItem(item) {
  // Set the input value to the selected scene's UUID
  const destinationField = document.getElementById("destination");
  destinationField.value = item.id;

  const dropdownSearch = document.getElementById("destinationDropdownSearch");
  dropdownSearch.value = item.title;
}

function populateDestinationDropdown(initial, category_data) {
  const items = category_data.obj.scenes;

  const dropdownMenu = document.getElementById("destinationDropdownMenu");
  const dropdownSearch = document.getElementById("destinationDropdownSearch");
  const dropdown = new Dropdown(dropdownSearch);

  if (initial != null) {
    // Get object from items by id
    const initial_item = items.find((item) => item.id === initial);
    selectDestinationItem(initial_item);
  }

  document.addEventListener("click", function (event) {
    // Check if the click is outside the dropdownSearch input and dropdownMenu
    if (
      !dropdownSearch.contains(event.target) &&
      !dropdownMenu.contains(event.target)
    ) {
      dropdown.hide();
    }
  });

  items.forEach((item) => {
    // First, order the resolutions by width
    var resolutions = item.base_content.resolutions.sort(
      (a, b) => a.width - b.width
    );

    // Then take the first object as thumbnail
    item.img = resolutions[0].file;

    const element = document.createElement("button");
    element.setAttribute("type", "button");
    element.classList.add("dropdown-item");
    element.innerHTML = `<img src="${item.img}" alt="${item.title}"><span class="dropdown-item-text">${item.title}</span>`;
    element.onclick = function () {
      selectDestinationItem(item);
      dropdown.hide();
    };
    dropdownMenu.appendChild(element);

    dropdownSearch.addEventListener("keyup", function () {
      const searchValue = dropdownSearch.value.toLowerCase();
      const filteredItems = items.filter((item) =>
        item.title.toLowerCase().includes(searchValue)
      );

      // Clear existing items
      dropdownMenu.innerHTML = "";

      // Repopulate dropdown with filtered items
      filteredItems.forEach((item) => {
        const element = document.createElement("button");
        element.setAttribute("type", "button");
        element.classList.add("dropdown-item");
        element.innerHTML = `<img src="${item.img}" alt="${item.title}"> ${item.title}`;
        element.onclick = function () {
          selectDestinationItem(item);
          dropdown.hide();
        };
        dropdownMenu.appendChild(element);
      });
      if (filteredItems.length) {
        dropdown.show();
      } else {
        dropdown.hide();
      }
    });
  });

  dropdownSearch.addEventListener("click", function (event) {
    dropdown.show();
  });
}

export { populateDestinationDropdown };