jobListSearchEl.addEventListener("click", (event) => {
  if (event.target.classList.contains("job-item__bookmark-icon")) {
    bookmarkClickHandler(event);
  }else{
  clickHandler(event)
}
});

import {
  state,
  bookmarksBtnEl,
  jobDetailsEl,
  jobListBookmarksEl,
  jobListSearchEl,
} from "../common.js";
import renderJobList from "./JobList.js";

const bookmarkClickHandler = (event, bookmarkTag = "item") => {
  if (!event.target.className.includes("bookmark")) {
    return;
  }

  if (state.bookmarkJobItems.some((jobItem) => jobItem.id === state.activeJobItem.id)) {
    state.bookmarkJobItems = state.bookmarkJobItems.filter((jobItem) => jobItem.id !== state.activeJobItem.id);
  } else {
  	state.bookmarkJobItems.push(state.activeJobItem);
  }

	localStorage.setItem("bookmarkJobItems", JSON.stringify(state.bookmarkJobItems));
	document.querySelector(`.job-${bookmarkTag}__bookmark-icon`).classList.toggle(`job-${bookmarkTag}__bookmark-icon--bookmarked`);
	renderJobList();
  renderJobList("bookmarks");
};

const mouseEnterHandler = () => {
  bookmarksBtnEl.classList.add("bookmarks-btn--active");
  jobListBookmarksEl.classList.add("job-list--visible");
  renderJobList("bookmarks");
};

const mouseLeaveHandler = () => {
  bookmarksBtnEl.classList.remove("bookmarks-btn--active");
  jobListBookmarksEl.classList.remove("job-list--visible");
};

bookmarksBtnEl.addEventListener("mouseenter", mouseEnterHandler);
jobListBookmarksEl.addEventListener("mouseleave", mouseLeaveHandler);
jobListBookmarksEl.addEventListener("click", (event) => {
  bookmarkClickHandler(event);
});
jobListSearchEl.addEventListener("click", (event) => {
  bookmarkClickHandler(event); 
});
jobDetailsEl.addEventListener("click", (event) => {
  bookmarkClickHandler(event, "info");
});

export default bookmarkClickHandler;