//Navigation Collapse For Mobile
$('a#nav_tab').on('mouseover', function () {

  var mediaQueryMobile = window.innerWidth;
  console.log(mediaQueryMobile);
  if (mediaQueryMobile <= 622) {
      // If the media query matches (i.e., the viewport is 622px or less)
      $(this).siblings('ul.subnav_content').addClass('open');
      console.log($(this).siblings('ul.subnav_content').attr('class'));
      console.log('Viewport is 622px or more');
  }
});

$('li.subnav a').on('click', function (e) {
  var mediaQueryMobile = window.innerWidth;
  if ($(this).siblings('ul.subnav_content').attr('class') != 'subnav_content open'
   && (mediaQueryMobile <= 622)) {
      $(this).siblings('ul.subnav_content').css("visibility", "hidden");
      $(this).siblings('ul.subnav_content').addClass('open');
  }
  else {
      $(this).siblings('ul.subnav_content').removeClass('open');
      $(this).siblings('ul.subnav_content').css("visibility", "visible");
  }
});






//Get element from the DOM
const q = document.querySelectorAll('.q');
const a = document.querySelectorAll('.a');
const arr = document.querySelectorAll('.faq-arrow');

//Select all 'faq-q' elements
if (q.length === 0) {
  // console.log('No "q" found 2');
}
for (let i = 0; i < q.length; i++) {
  //Add click event to all 'q' elements
  q[i].addEventListener('click', () => {
    /*Open the 'faq-a' element with the same 'i' as the clicked 'faq-q' element*/
    a[i].classList.toggle('a-opened');
    /*Rotate 'arr' element with the same "i" as the clicked 'faq-q' element*/
    arr[i].classList.toggle('arrow-rotated');
  });
}

const mediaQuery1024 = window.matchMedia('(min-width: 1024px)');
const navbar = document.getElementById('navigation');
const subnav = document.getElementById('sub-nav-content');
const subnavPlaceholder = document.getElementById('sub-nav-placeholder');
const content = document.getElementById('main-content');


// Function to handle the media query change
function handleMediaQueryChange(event) {
  if (event.matches) {
    // If the media query matches (i.e., the viewport is 1024px or less)
    console.log('Viewport is 1024px or more');
    window.onload = function () {
      // const navbar = document.getElementById('navigation');
      // const subnav = document.getElementById('sub-nav-content');
      // const subnavPlaceholder = document.getElementById('sub-nav-placeholder');
      // const content = document.getElementById('main-content');
      const navbarHeight = navbar.offsetHeight;
      content.style.marginTop = `${navbarHeight}px`;

      window.addEventListener('scroll', function () {
        const scrollPosition = window.scrollY;
        const navbarBottom = navbar.offsetHeight;
        const subnavTop = subnavPlaceholder.getBoundingClientRect().top + scrollPosition;

        if (scrollPosition > subnavTop - navbarBottom) {
          subnav.style.position = 'fixed';
          subnav.style.top = `${navbarBottom}px`;
          subnavPlaceholder.style.width = `${subnav.offsetWidth}px`;

        } else {
          subnav.style.position = 'relative';
          subnav.style.top = 'auto';
          subnavPlaceholder.style.height = '0';
          subnavPlaceholder.style.width = '0';
        }
      });
    };
  }
  else {
    // If the media query does not match (i.e., the viewport is more than 600px)
    console.log('Viewport is less than 1024px');

    //TEMP//
    // subnav.style.position = 'relative';
    // subnav.style.top = 'auto';
    // subnavPlaceholder.style.height = '0';
    // subnavPlaceholder.style.width = '0';
  }
}

// Add a listener to the media query
mediaQuery1024.addListener(handleMediaQueryChange);

// Initial check
handleMediaQueryChange(mediaQuery1024);
// window.onload = function () {
//   const navbar = document.getElementById('navigation');
//   const subnav = document.getElementById('sub-nav-content');
//   const subnavPlaceholder = document.getElementById('sub-nav-placeholder');
//   const content = document.getElementById('main-content');
//   const navbarHeight = navbar.offsetHeight;
//   content.style.marginTop = `${navbarHeight}px`;

//   window.addEventListener('scroll', function () {
//     const scrollPosition = window.scrollY;
//     const navbarBottom = navbar.offsetHeight;
//     const subnavTop = subnavPlaceholder.getBoundingClientRect().top + scrollPosition;

//     if (scrollPosition > subnavTop - navbarBottom) {
//       subnav.style.position = 'fixed';
//       subnav.style.top = `${navbarBottom}px`;
//       subnavPlaceholder.style.width = `${subnav.offsetWidth}px`;

//     } else {
//       subnav.style.position = 'relative';
//       subnav.style.top = 'auto';
//       subnavPlaceholder.style.height = '0';
//       subnavPlaceholder.style.width = '0';
//     }
//   });
// };

// document.addEventListener('DOMContentLoaded', function () {
//   const navbar = document.getElementById('navigation');
//   const subnav = document.getElementById('sub-nav-content');
//   const subnavPlaceholder = document.getElementById('sub-nav-placeholder');
//   const subnavList = document.getElementById('sub-nav-list');
//   const content = document.getElementById('main-content');
//   const sections = document.querySelectorAll('.right-sub-content .main-content-title');
//   const navbarHeight = navbar.offsetHeight;

//   content.style.marginTop = `${navbarHeight}px`;

//   window.addEventListener('scroll', function () {
//     const scrollPosition = window.scrollY;
//     const navbarBottom = navbar.offsetHeight;
//     const subnavTop = subnavPlaceholder.getBoundingClientRect().top + scrollPosition;

//     if (scrollPosition > subnavTop - navbarBottom) {
//       subnav.style.position = 'fixed';
//       subnav.style.top = `${navbarBottom}px`;
//       subnavPlaceholder.style.width = `${subnav.offsetWidth}px`;
//     } else {
//       subnav.style.position = 'relative';
//       subnav.style.top = 'auto';
//       subnavPlaceholder.style.height = '0';
//       subnavPlaceholder.style.width = '0';
//     }

//     // Highlight the active section in sub-nav
//     let activeSection = null;
//     sections.forEach(section => {
//       const rect = section.getBoundingClientRect();
//       if (rect.top <= navbarHeight && rect.bottom >= navbarHeight) {
//         activeSection = section;
//       }
//     });

//     subnavList.querySelectorAll('li').forEach(li => {
//       li.classList.remove('active');
//     });

//     if (activeSection) {
//       const activeLi = subnavList.querySelector(`li[data-target="${activeSection.id}"]`);
//       if (activeLi) {
//         activeLi.classList.add('active');
//       }
//     }
//   });

//   // Add click event listeners to sub-nav list items
//   subnavList.querySelectorAll('li').forEach(li => {
//     li.addEventListener('click', function () {
//       const targetId = li.getAttribute('data-target');
//       const targetSection = document.getElementById(targetId);
//       if (targetSection) {
//         window.scrollTo({
//           top: targetSection.offsetTop - navbarHeight,
//           behavior: 'smooth'
//         });
//       }
//     });
//   });
// });


// // Get FUMC YouTube videos
// const channelId = 'UCpNOXE0U-Hfh1mdhs5cKAIw'; // Channel ID for InclusiveFirstUMC
// const apiKey = '';
// const maxResults = 10; // Number of videos to fetch

// async function fetchYouTubeVideos() {
//     const response = await fetch(`https://www.googleapis.com/youtube/v3/search?key=${apiKey}&channelId=${channelId}&part=snippet,id&order=date&maxResults=${maxResults}`);
//     const data = await response.json();
//     displayVideos(data.items);
// }

// function displayVideos(videos) {
//     const videoList = document.getElementById('videoList');
//     videos.forEach(video => {
//         const videoItem = document.createElement('li');
//         const videoLink = document.createElement('a');
//         videoLink.href = `https://www.youtube.com/watch?v=${video.id.videoId}`;
//         videoLink.target = '_blank';

//         const videoThumbnail = document.createElement('img');
//         videoThumbnail.src = video.snippet.thumbnails.default.url;
//         videoThumbnail.alt = video.snippet.title;

//         const videoTitle = document.createElement('p');
//         videoTitle.textContent = video.snippet.title;

//         videoLink.appendChild(videoThumbnail);
//         videoLink.appendChild(videoTitle);
//         videoItem.appendChild(videoLink);
//         videoList.appendChild(videoItem);
//     });
// }

// fetchYouTubeVideos();