SearchableDropdown = {
  mounted() {
    this.el.addEventListener("input", (e) => {
      const query = e.target.value.toLowerCase();
      const dropdownId = this.el.dataset.dropdownId;
      const optionsContainer = document.querySelector(`#${dropdownId}-options`);
      const options = optionsContainer.querySelectorAll("li button");

      options.forEach((option) => {
        const text = option.textContent.toLowerCase();
        option.parentElement.style.display = text.includes(query)
          ? "block"
          : "none";
      });
    });
  },
};

const DropdownAnimation = {
  mounted() {
    this.el.addEventListener("transitionend", (e) => {
      if (
        e.propertyName === "opacity" &&
        this.el.classList.contains("fade-out")
      ) {
        this.el.classList.add("hidden");
      }
    });
  },
};

export { SearchableDropdown, DropdownAnimation };