/*
 * Utilities
 * ---------
 */

const imageLoaded = ( image ) => {
  return new Promise( ( resolve, reject ) => {
    let proxyImage = new Image();

    proxyImage.src = image.src;

    const res = () => {
      resolve( image );
    };

    const err = ( message ) => {
      reject( message );
    };

    if( proxyImage.complete )
      res();

    proxyImage.onload = res;
    proxyImage.onerror = err;
  } );
};

const draw = ( g, c, ctx ) => {
  const w = g.clientWidth;
  const h = g.clientHeight;

  c.width = w;
  c.height = h;

  ctx.drawImage( g, 0, 0, w, h );
};

/*
 * DOM loaded
 * ----------
 */

document.addEventListener( 'DOMContentLoaded', () => {

  /* Variables */

  const gifs = Array.from( document.querySelectorAll( '.o-gif__lazy' ) );

  let items = [];
  let resizeTimer;
  let reduceMotion = false;
  let ioSupported = false;

  /* Check if reduce motion */

  const mediaQuery = window.matchMedia( '(prefers-reduced-motion: reduce)' );

  if( !mediaQuery || mediaQuery.matches )
    reduceMotion = true;
  
  /* Check if IntersectionObserver is supported */

  if('IntersectionObserver' in window &&
     'IntersectionObserverEntry' in window &&
     'intersectionRatio' in window.IntersectionObserverEntry.prototype ) {
    ioSupported = true;
  }

  /* Event callbacks */

  const resize = () => {
    // throttles resize event
    clearTimeout( resizeTimer );

    resizeTimer = setTimeout( () => {
      if( items.length ) {
        items.forEach( item => {
          draw( item.gif, item.canvas, item.context );
        } );
      }
    }, 100 );
  };

  const click = ( e ) => {
    let button = e.currentTarget;
    let show = button.getAttribute( 'data-canvas-show' );

    button.setAttribute( 'data-canvas-show', show === "true" ? false : true );
  };
  
  /* Source: https://web.dev/lazy-loading-images/ */
  
  const lazyLoad = ( index ) => {
    const item = items[index];
    
    const observer = new IntersectionObserver( ( entries, obs ) => {
      entries.forEach( entry => {
        if( entry.isIntersecting ) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          
          imageSetup( index );
          
          observer.unobserve( lazyImage );
        }
      } );
    } );
    
    observer.observe( item.gif );
  };
  
  const imageSetup = ( index ) => {
    const item = items[index];
    
    imageLoaded( item.gif ).then( data => {
      draw( item.gif, item.canvas, item.context );
      item.gif.parentElement.appendChild( item.canvas );
      
      if( !reduceMotion )
        item.button.click();
      
      item.canvas.setAttribute( 'data-loaded', true );
      item.gif.setAttribute( 'data-loaded', true );
    } ).catch( ( err ) => {
      console.log( err );
      item.button.style.display = 'none';
    } );
  };

  /* Loop through gifs */

  if( gifs.length ) {
    
    gifs.forEach( ( g, index ) => {
      const c = document.createElement( 'canvas' );
      const ctx = c.getContext( '2d' );
      const button = g.nextElementSibling;
      
      c.setAttribute( 'class', 'o-gif__canvas' );
      c.setAttribute( 'data-loaded', 'false' );

      items.push( {
        gif: g, 
        canvas: c, 
        context: ctx,
        button: button,
      } );
      
      if( ioSupported ) {
        lazyLoad( index );
      } else {
        g.src = g.getAttribute( 'data-src' );
        imageSetup( index );
      }

      button.addEventListener( 'click', click );
    } );

    window.addEventListener( 'resize', resize );
  }

} );