/**
 * Schedule collapsable section animation
 */
document.querySelectorAll('.schedule-category').forEach(node => {
  let opened = false
  let icon = node.querySelector('.schedule-category-collapse-icon')
  let content = node.querySelector('.schedule-category-table')
  let header = node.querySelector('.schedule-category-header')
  header.onclick = () => {
    if (!opened) {
      // open the table
      icon.style.transform = "rotate(0deg)"
      content.style.maxHeight = content.scrollHeight + "px"
    } else {
      // close the table
      icon.style.transform = "rotate(180deg)"
      content.style.maxHeight = null
    }
    opened = !opened
  }
})

/**
 * Description
 */
let description = document.querySelector('.description-cutted')
let descriptionActions = document.querySelector('.description-actions-container')
let descriptionOpened = false
let defaultMaxHeight = ""
if (description !== null) {
  let btn = document.querySelector('.description-btn')
  btn.onclick = () => {
    if (!descriptionOpened) {
      // open the full description
      descriptionActions.className = descriptionActions.className.replace(' closed', '')
      defaultMaxHeight = description.style.maxHeight
      description.style.maxHeight = description.scrollHeight + "px"
      btn.textContent = "Fermer la description"
    } else {
      // initial max Height
      descriptionActions.className += ' closed'
      description.style.maxHeight = defaultMaxHeight
      btn.textContent = "Ouvrir la description"
    }
    descriptionOpened = !descriptionOpened
  }
}

/**
 * Gallery modal to view media in large
 */
let mediaModal = document.querySelector('#media-modal')
let mediaModalContent = document.querySelector('#media-modal-content')
// let mediaModalImage = document.querySelector('#media-modal img')
// let mediaModalVideo = document.querySelector('#media-modal video')
// let mediaModalSource = document.querySelector('#media-modal video source')

// function disableScroll() { 
//     // Get the current page scroll position 
//     scrollTop = window.pageYOffset || document.documentElement.scrollTop; 
//     scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, 
  
//         // if any scroll is attempted, set this to the previous value 
//         window.onscroll = function() { 
//             window.scrollTo(scrollLeft, scrollTop); 
//         }; 
// } 
  
// function enableScroll() { 
//     window.onscroll = function() {}; 
// }


let openModal = (url, isVideo) =>  {
  mediaModal.style.visibility = 'visible'
  mediaModal.style.opacity = 1
  mediaModalContent.innerHTML = ""

  let attr = document.createAttribute('src')
  attr.value = url
  let el = null
  if (isVideo) {
    el = document.createElement('video')
    el.setAttribute('controls', '')
    el.setAttribute('autoplay', '')
    el.setAttribute('name', 'media')
    let source = document.createElement('source')
    source.setAttribute('src', url)
    source.setAttribute('type', 'video/mp4')
    el.appendChild(source)
  } else {
    el = document.createElement('img')
    el.attributes.setNamedItem(attr)
  }
  mediaModalContent.appendChild(el)
  //document.body.style.height = '100vh'
  document.body.style.overflow = 'hidden'
  document.body.style.touchAction = 'none'

  setTimeout(() => {

    const outsideClickListener = event => {
      if (!mediaModalContent.contains(event.target) && isVisible(mediaModalContent)) {
        closeModal()
        document.removeEventListener('click', outsideClickListener)
      }
    }
    document.addEventListener('click', outsideClickListener)
  
  }, 100)
}

const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length )

let closeModal = () =>  {
  mediaModal.style.visibility = 'hidden'
  mediaModal.style.opacity = 0
  document.body.style.overflow = 'initial'
  document.body.style.height = 'initial'
  document.body.style.touchAction = 'initial'
  let video = document.querySelector('#media-modal video')
  if (video !== null) {
    video.pause()
  }
}