// const Flickity = require('./flickity')
const utils = require('./utils')

module.exports = superlazy

function superlazy(Flickity) {
  Flickity.createMethods.push('_createLazyload')
  var proto = Flickity.prototype

  proto._createLazyload = function() {
    this.on('select', this.lazyLoad)
  }

  proto.lazyLoad = function() {
    var lazyLoad = this.options.lazyLoad
    if (!lazyLoad) {
      return
    }
    // get adjacent cells, use lazyLoad option for adjacent count
    var adjCount = typeof lazyLoad == 'number' ? lazyLoad : 0
    var cellElems = this.getAdjacentCellElements(adjCount)
    // get lazy images in those cells
    var lazyImages = []
    cellElems.forEach(function(cellElem) {
      var lazyCellImages = getCellLazyImages(cellElem)
      lazyImages = lazyImages.concat(lazyCellImages)
    })
    // load lazy images
    lazyImages.forEach(function(img) {
      new LazyLoader(img, this)
    }, this)
  }

  function getCellLazyImages(cellElem) {
    // check if cell element is lazy image
    if (
      cellElem.nodeName == 'IMG' &&
      cellElem.getAttribute('data-flickity-lazyload')
    ) {
      return [cellElem]
    }
    // select lazy images in cell
    var imgs = cellElem.querySelectorAll('img[data-flickity-lazyload]')
    return utils.makeArray(imgs)
  }

  // -------------------------- LazyLoader -------------------------- //

  /**
   * class to handle loading images
   */
  function LazyLoader(img, flickity) {
    this.img = img
    this.flickity = flickity
    this.load()
  }

  LazyLoader.prototype.handleEvent = utils.handleEvent

  LazyLoader.prototype.load = function() {
    this.img.addEventListener('load', this)
    this.img.addEventListener('error', this)
    // load image
    this.img.src = this.img.getAttribute('data-flickity-lazyload')
    // remove attr
    this.img.removeAttribute('data-flickity-lazyload')
  }

  LazyLoader.prototype.onload = function(event) {
    this.complete(event, 'flickity-lazyloaded')
  }

  LazyLoader.prototype.onerror = function(event) {
    this.complete(event, 'flickity-lazyerror')
  }

  LazyLoader.prototype.complete = function(event, className) {
    // unbind events
    this.img.removeEventListener('load', this)
    this.img.removeEventListener('error', this)

    var cell = this.flickity.getParentCell(this.img)
    var cellElem = cell && cell.element
    this.flickity.cellSizeChange(cellElem)

    this.img.classList.add(className)
    this.flickity.dispatchEvent('lazyLoad', event, cellElem)
  }

  // -----  ----- //

  Flickity.LazyLoader = LazyLoader
}

superlazy.flickTheBeab = superlazy