import { getEvents } from "./services/eventService.js";
import { renderEventList } from "./ui/eventList.js";
import { getFilters } from "./ui/filters.js";

const button = document.querySelector("#load-events");
const container = document.querySelector("#event-list");
const cityInput = document.querySelector("#city-input");

button.addEventListener("click", handleSearch);

cityInput.addEventListener("keydown", (event) => {
  if (event.key === "Enter") handleSearch();
});

async function handleSearch() {

  const { city, dateFrom, dateTo, category } = getFilters();

  if (!city) {
    container.innerHTML = "<p class='text-danger'>Please enter a city.</p>";
    return;
  }

  container.innerHTML = "<p class='text-muted'>Loading events...</p>";

  const events = await getEvents(city);

  const filteredEvents = applyFilters(events, dateFrom, dateTo, category);

  renderEventList(filteredEvents, container);
}

function applyFilters(events, dateFrom, dateTo, category) {

  return events.filter(event => {

    const matchDateFrom = dateFrom ? event.date >= dateFrom : true;
    const matchDateTo = dateTo ? event.date <= dateTo : true;

    const matchCategory = category
      ? event.category && event.category.includes(category)
      : true;

    return matchDateFrom && matchDateTo && matchCategory;
  });
}