// Selecting the sidebar and buttons
const sidebar = document.querySelector(".sidebar");

// Function to hide the sidebar when the mouse leaves
const hideSidebar = () => {
  if (sidebar.classList.contains("hoverable")) {
    sidebar.classList.add("close");
  }
};

// Function to show the sidebar when the mouse enter
const showSidebar = () => {
  if (sidebar.classList.contains("hoverable")) {
    sidebar.classList.remove("close");
  }
};

// If the window width is less than 800px, close the sidebar and remove hoverability and lock
if (window.innerWidth < 800) {
  sidebar.classList.add("close");
  sidebar.classList.remove("locked");
  sidebar.classList.remove("hoverable");
}

// Adding event listeners to buttons and sidebar for the corresponding actions
sidebar.addEventListener("mouseleave", hideSidebar);
sidebar.addEventListener("mouseenter", showSidebar);

const links = document.querySelectorAll('.link');
const currentImg = document.getElementById('main-icon');
const currentText = document.getElementById('main-text');

links.forEach(link => {
    link.addEventListener('click', function() {
        links.forEach(l => l.classList.remove('active'));
        this.classList.add('active');

        document.querySelectorAll('.main-body').forEach(el => el.classList.add('d-none'));

        const clickedIconSrc = this.querySelector('img').src;
        const clickedText = this.querySelector('span').textContent;

        document.querySelector('.' + clickedText)?.classList.remove('d-none');

        if (currentImg) {
            currentImg.src = clickedIconSrc;
            currentText.textContent = clickedText;

            if(clickedText == 'Flashcards' || clickedText == 'Videos' || clickedText == 'Downloads') {
              document.body.style.background = '#ffffff';
            } else {
              document.body.style.background = '#F3F3F3';
            }
        }
    });

    // Agregar navegación por teclado
    link.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            this.click();
        }
    });
});