// TODO:
// this could/should be a web component that could make the pic private, hydrate itself and "just drop in"
// extra sauce: add pointer events to drag the image to close

// state variable to share the clicked image to hide/show functions
let pic = null

function showLightbox() {
  // give the clicked image a VT name
  // this is what enables the position/scale morphing
  // if the user is cool with motion
  if (window.matchMedia('(prefers-reduced-motion: no-preference)').matches)
    pic.style.viewTransitionName = '--light-box-img'
  
  function mutate() {
    // clone it into the lightbox dialog
    lightbox.querySelector('sl-ot').innerHTML = pic.outerHTML
    
    // hide the source image
    pic.style.display = 'none'
    
    // show the dialog that has the image in it
    lightbox.showModal()
  }
  
  // take a snapshot of the image where it's at
  document.startViewTransition
    ? document.startViewTransition(mutate)
    : mutate()
}

async function hideLightbox() {
  function mutate() {
    // hide the popover
    lightbox.close()
    
    // restore the image where it came from
    pic.style.display = null
  }
  
  // take a snapshot of the dialog with the image open
  document.startViewTransition
    ? await document.startViewTransition(mutate).updateCallbackDone
    : mutate()

  // once the updateCallback is done
  // remove the view transition name
  pic.style.viewTransitionName = null
  
  // put the lightbox subject back to null
  pic = null
}

document.onclick = e => {
  // if the clicked element is not an img, bail
  if (e.target.nodeName != 'IMG') return
  
  // stash clicked image
  pic = e.target
  
  // show the lightbox
  showLightbox()  
}

// when the lightbox close button is clicked
lightbox.querySelector(':scope > header > button').addEventListener('click', e => {
  hideLightbox()
})

// light dismiss
lightbox.addEventListener('click', e => {
  if (e.target.nodeName === 'DIALOG')
    hideLightbox()
})

// when esc is clicked, close the lightbox
document.addEventListener('keydown', async e => {
  if (!lightbox.open) return
  
  if (e.key === 'Escape') {
    e.preventDefault()
    hideLightbox()
  }
})