import { fetchEvents } from "./api/ticketmaster.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 = "Please enter a city.";
    return;
  }

  container.innerHTML = "Loading events...";

  const events = await fetchEvents(city);

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

  renderEventList(filteredEvents, container);
}

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

  return events.filter(event => {

    const eventDate = event.dates.start.localDate;

    const eventCategory =
      event.classifications?.[0]?.segment?.name?.toLowerCase();

    const matchDateFrom = dateFrom ? eventDate >= dateFrom : true;
    const matchDateTo = dateTo ? eventDate <= dateTo : true;

    const matchCategory = category
      ? eventCategory === category
      : true;

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

}