search suggestions

export default class SearchFilter {

  constructor(inputSelector, buttonSelector, apiEndpoint) {
    /**
     * Constructor: Initializes the search filter by selecting DOM elements,
     * setting the API endpoint, and binding event listeners.
     *
     * @param {string} inputSelector - The selector for the search input element.
     * @param {string} buttonSelector - The selector for the search button element.
     * @param {string} resultsContainerClass - The class name to assign to the results container.
     * @param {string} apiEndpoint - The API endpoint URL for fetching products.
    */
    this.searchField = document.querySelector(inputSelector).value;
    this.searchButton = document.querySelector(buttonSelector);
    this.resultsContainer = document.querySelector(".search-container .searchFilter");
    this.apiEndpoint = apiEndpoint;

    // Initialize event listeners for search input and button
    this.searchResults();
  }


  displayResultsContainer() {
    /**
     * displayResultsContainer
     *
     * Displays the search results container by adding a CSS class.
     *
     * @returns {HTMLElement} The search results container element.
    */
    console.log("displayResultsContainer called");
    this.resultsContainer.classList.add("searchShow");
    return this.resultsContainer;
  }


  getQuery(term) {
    /**
     * getQuery
     *
     * Retrieves the search term entered by the user.
     *
     * @param {string} term - The raw search term.
     * @returns {string} The processed search term.
    */
    console.log("getQuery called");
    return term;
  }


  async getProducts(matchingProduct) {
    /**
     * getProducts
     *
     * Asynchronously fetches products from the API endpoint and filters them
     * based on the search term.
     *
     * @param {string} matchingProduct - The search term to filter products.
     * @returns {Promise<Array>} A promise that resolves to an array of matching products.
   */
    console.log("getProducts called");
    let searchTerm = this.getQuery(matchingProduct);
    try {
      const response = await fetch(this.apiEndpoint, { method: "GET" }); // Toets deur 'n ander post type te gebruik.
      if (!response.ok) {
        throw new Error("Failed to fetch products");
      }
      const products = await response.json();

      // Filter products whose names include the search term (case-insensitive)
      const matchingProducts = products.filter(product =>
        product.name.toLowerCase().includes(searchTerm.toLowerCase())
      );
      return matchingProducts;
    } catch (error) {
      console.error("Error fetching products:", error);
      return [];
    }
  }


  async createResults(searchTerm) {
    /**
     * createResults
     *
     * Creates HTML list items for each matching product and appends them to the results container.
     *
     * @param {string} searchTerm - The search term entered by the user.
     * @returns {Promise<Array>} A promise that resolves to the array of matching products.
     */
    console.log("createResults called");
    const matchingProducts = await this.getProducts(searchTerm);

    // Clear any existing results
    this.resultsContainer.innerHTML = "";

    if (matchingProducts.length === 0) {
      this.resultsContainer.innerHTML = '<li class="result">No results found.</li>';
      return matchingProducts;
    }

    // Create a list item for each matching product
    matchingProducts.forEach(product => {
      const listItem = document.createElement("li");
      listItem.classList.add("listItem");

      // Create an image element for the product thumbnail
      const imageElement = document.createElement("img");
      imageElement.classList.add("itemThumb");
      imageElement.src = product.images && product.images.length > 0 ? product.images[0].src : "";
      imageElement.alt = product.name;

      // Create an anchor element wrapping a header for the product name
      const titleElementHeader = document.createElement("h1");
      titleElementHeader.textContent = product.name;
      const titleElement = document.createElement("a");
      titleElement.classList.add("itemTitle");
      titleElement.href = product.permalink;
      titleElement.appendChild(titleElementHeader);

      // Append the image and title to the list item
      listItem.appendChild(imageElement);
      listItem.appendChild(titleElement);

      // Append the list item to the results container
      this.resultsContainer.appendChild(listItem);
    });

    return matchingProducts;
  }


  searchResults() {
    /**
     * searchResults
     *
     * Binds the event listener to the search input field so that as the user types,
     * the results container is displayed and the search is performed with a delay.
     */
    console.log("searchResults called");
    this.searchField.addEventListener("keyup", () => {
      console.log("searchResults event called");
      this.displayResultsContainer();
      // Use setTimeout to delay fetching results until user stops typing for 750ms
      setTimeout(() => this.createResults(this.searchField.value), 750);
    });
  }
}