function populateTable(resourceUPN, events, container) {
  console.log(events);
  // Create a wrapper for the resource and its events
  const resourceWrapper = document.createElement('div');
  resourceWrapper.className = 'resource-wrapper';

  // Create a row for the resource title
  const titleRow = document.createElement('div');
  titleRow.className = 'title-row';

  switch (resourceUPN.split("@")[0]) {
    case "s-er-1431-00":
      titleRow.innerHTML = 'ER 1431-00 Open Space';
      break;
    case "s-er-1431-03":
      titleRow.innerHTML = 'ER 1431-03 Visualization Lab';
      break;
    case "s-er-1431-33":
      titleRow.innerHTML = 'ER 1431-33 Ideation Lab';
      break;
    case "s-er-1431-37":
      titleRow.innerHTML = 'ER 1431-37 Multipurpose Room';
      break;
    case "s-er-1431-39":
      titleRow.innerHTML = 'ER 1431-39 Conference Room';
      break;
  }
  resourceWrapper.appendChild(titleRow);

  // Create a grid for events
  const eventGrid = document.createElement('div');
  eventGrid.className = 'event-row';

  events.forEach((event, index) => {
    const eventCell = document.createElement('div');
    eventCell.className = 'flex-cell';
    const title = event.subject;
    const organizer = event.organizer.emailAddress.name;
    const startTime = formatUTCTime(event.start.dateTime + 'Z');
    const endTime = formatUTCTime(event.end.dateTime + 'Z');

    const titleDiv = document.createElement('div');
    titleDiv.textContent = title;

    const organizerDiv = document.createElement('div');
    organizerDiv.textContent = organizer;
    organizerDiv.className = 'organizer';

    const timeDiv = document.createElement('div');
    timeDiv.className = 'time-range';
    timeDiv.innerHTML = `${startTime} - ${endTime}`;

    eventCell.appendChild(titleDiv);
    eventCell.appendChild(organizerDiv);
    eventCell.appendChild(timeDiv);
    eventGrid.appendChild(eventCell);
  });

  resourceWrapper.appendChild(eventGrid);
  container.appendChild(resourceWrapper);
}

function formatUTCTime(date) {
  const etDate = new Date(date.toLocaleString("en-US", { timeZone: "America/New_York" }));
  const hours = etDate.getHours();
  const minutes = etDate.getMinutes().toString().padStart(2, '0');

  return `<span class="time">${hours}</span><span class="separator">:</span><span class="time">${minutes}</span>`;
}

async function fetchAllEvents() {
  console.log("fetching events");
  const response = await fetch('http://localhost:8080/api/events');
  const allEvents = await response.json();

  console.log(allEvents);


  const resourcesContainer = document.getElementById('resources-container');
  resourcesContainer.innerHTML = '';
  const keys = Object.keys(allEvents);

  keys.forEach((key) => {
    console.log(allEvents[key]);
    populateTable(key, allEvents[key].value, resourcesContainer);
  });
}


function updateTime(showSeparator) {
  let timeString = formatUTCTime(new Date());

  if (!showSeparator) {
    timeString = timeString.replace(':', ' ');
  }
  document.getElementById('time').innerHTML = timeString;

}

function updateFontSize(elementId) {
  const element = document.getElementById(elementId);
  const textLength = element.textContent.length;

  if (textLength <= 83) {
    element.style.fontSize = '5em';
  } else if (textLength <= 166) {
    element.style.fontSize = '4em';
  } else {
    element.style.fontSize = '3em';
  }
}


// Function to fetch and display a quote
async function fetchAndDisplayQuote() {
  try {
    const response = await fetch('http://localhost:8080/api/quotes');

    if (response.ok) {
      const data = await response.json();
      const quotes = data.results;
      const randomIndex = Math.floor(Math.random() * quotes.length);
      const randomQuote = quotes[randomIndex];

      document.getElementById('quote').innerHTML = `<i>${randomQuote.content}</i>`;
      updateFontSize('quote');
      document.getElementById('author').innerHTML = `${randomQuote.author}`;

    } else {
      console.error('Failed to fetch data');
    }
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

// Fetch Current Weather
async function fetchWeather() {
  const response = await fetch('http://localhost:8080/api/weather');
  const data = await response.json();
  if (data.cod === 200) {
    const temperature = data.main.temp;
    const description = data.weather[0].description;
    const iconCode = data.weather[0].icon;
    const iconUrl = `https://openweathermap.org/img/wn/${iconCode}.png`

    document.getElementById("weather-icon-container").innerHTML = `<img id="weather-icon" alt="Weather Icon" src="${iconUrl}">`;
    document.getElementById("temperature").innerHTML = `${temperature}°`;
    document.getElementById("description").innerHTML = `${description}`;
  } else {
    document.getElementById("weather").innerText = 'Weather data unavailable';
  }
}

// Display Current Time
function displayTime() {
  const now = new Date();
  const timeHtml = formatUTCTime(now);
  document.getElementById("time").innerHTML = timeHtml;
  setTimeout(displayTime, 60000);

}

// Slideshow

async function fetchSlideshowImages() {
  try {
    const response = await fetch('http://localhost:8080/api/slideshow');
    if (!response.ok) {
      throw new Error('Failed to fetch slideshow images');
    }
    const images = await response.json();
    updateSlideshow(images);
  } catch (error) {
    console.error('Error fetching slideshow images:', error);
  }
}

function createSlideshowElement(src) {
  const img = document.createElement('img');
  // img.src = src;
  img.src = `http://localhost:8080${src}`;
  img.className = 'slideshow-img';
  img.style.width = '100%';
  img.style.maxHeight = '100vh';
  img.style.objectFit = 'cover';
  const filename = src.split('/').pop().split('.')[0]; // Extracts filename without extension

  // Set the filename as the alt text
  img.alt = filename;

  // If you also want to set the title attribute
  img.title = filename;
  return img;
}

let currentIndex = 0;
function updateSlideshow(images) {
  if (images.length === 0) {
    console.log('No images found for the slideshow.');
    return;
  }

  const slideshowContainer = document.getElementById('slideshow');
  slideshowContainer.innerHTML = '';
  const imageElement = createSlideshowElement(images[currentIndex]);
  slideshowContainer.appendChild(imageElement);

  // Wait a little bit before starting the fade-in to ensure it's loaded
  setTimeout(() => { imageElement.style.opacity = '1'; }, 100);

  // Clean up the previous image after the new one has faded in
  setTimeout(() => {
    while (slideshowContainer.children.length > 1) {
      slideshowContainer.removeChild(slideshowContainer.firstChild);
    }
  }, 100);

  currentIndex = (currentIndex + 1) % images.length;
  setTimeout(() => updateSlideshow(images), 30000); // Change image every 5 seconds
}

let showSeparator = true;

fetchAndDisplayQuote();
setInterval(fetchAndDisplayQuote, 60 * 60 * 1000);

fetchWeather();
setInterval(fetchWeather, 15 * 60 * 1000);

updateTime(showSeparator);
setInterval(() => {
  updateTime(showSeparator);
  showSeparator = !showSeparator;
}, 1000);

fetchSlideshowImages();

fetchAllEvents();
setInterval(fetchAllEvents, 5 * 60 * 1000);