utils.js

// error handling functionality
import { savedRecipes } from '../save-recipes.js';
export function displayError(grid) {
  if (document.querySelector('.error')) {
    document.querySelector('.error').remove();
  }
  const error = document.createElement('h3');
  error.classList.add('error');
  error.textContent = `Something went wrong ,Please try again later `;
  grid.appendChild(error);
}

// No results functionality
export function noResults(
  grid,
  Query,
  filter = false,
  byIngredients = { isIngredients: false, ingredient: '' }
) {
  grid.innerHTML = '';
  const noResult = document.createElement('h3');
  noResult.classList.add('no-result');
  if (filter === true) {
    noResult.textContent = `No results found with the selected filters. Please try different filter options.`;
    grid.appendChild(noResult);
    return;
  }

  if (byIngredients.isIngredients) {
    noResult.innerHTML = `No results found for <span>"${byIngredients.ingredient}"</span>. Please try a different ingredients.`;
    grid.appendChild(noResult);
    return;
  }
  noResult.innerHTML = `No results found for <span>"${Query}"</span>. Please try a different search term.`;
  grid.appendChild(noResult);
}

// save feature
export const handler = function (Btn, array) {
  const itemId = Btn.dataset.itemId;
  const item = array.find((recipe) => recipe.id == itemId);

  if (item) {
    if (!savedRecipes.some((recipe) => recipe.id === item.id)) {
      // Add to saved recipes
      savedRecipes.unshift(item);
      localStorage.setItem('savedRecipes', JSON.stringify(savedRecipes));
      
      // Update button appearance
      addHoverEvent(Btn);
      Btn.innerHTML = 'Saved';
      Btn.style.cssText =
        'background-color:white; border:1px solid #FF8C00; color: #FF8C00;';
    } else {
      // Remove from saved recipes
      const index = savedRecipes.findIndex((recipe) => recipe.id === item.id);
      if (index !== -1) {
        savedRecipes.splice(index, 1);
        localStorage.setItem('savedRecipes', JSON.stringify(savedRecipes));
      }
      
      // Update button appearance
      removeHoverEvent(Btn);
      Btn.innerHTML = 'Save';
      Btn.style.cssText =
        'background-color:#FF8C00; border:none ; color: white;';
    }
  }
};

export function addHoverEvent(btn) {
  const mouseEnter = () => (btn.innerHTML = 'Remove');
  const mouseLeave = () => (btn.innerHTML = 'Saved');
  btn._hoverListeners = { mouseEnter, mouseLeave };
  btn.addEventListener('mouseenter', mouseEnter);
  btn.addEventListener('mouseleave', mouseLeave);
}

export function removeHoverEvent(btn) {
  if (btn._hoverListeners) {
    btn.removeEventListener('mouseenter', btn._hoverListeners.mouseEnter);
    btn.removeEventListener('mouseleave', btn._hoverListeners.mouseLeave);
    delete btn._hoverListeners;
  }
}