/**
 * Controla o carregamento das imagens com base na posição do viewPort.
 *
 * @author Casa Publicadora Brasileira - Davi Aragão
 * @since 26/12/2017
 **/
export class LazyImg
{
	/**
	 * Construtor
	 *
	 * @param Array HTMLElement elementsToObserve - Os elementos que terão as imagens carregadas sob demanda do view port.
	 * @param Number imgType - O tipo da imagem. 0 - <img>. 1 - backround-image: url().
	 * @return void
	 * @author Casa Publicadora Brasileira - Davi Aragão
	 * @since 26/12/2017
	 **/
	constructor(elementsToObserve, imgType = 1) {
		this.imgType = imgType;
		('IntersectionObserver' in window) ? this.observeElements(elementsToObserve) : this._loadAllImages(elementsToObserve);
	}

	/**
	 * Percorre a lista de elementos elementsToObserve e começa a observá-los.
	 * Com 50px de margin o método _onIntersection é acionado.
	 *
	 * @param Array HTMLElement elementsToObserve - Os elementos que terão as imagens carregadas sob demanda do veiw port.
	 * @return void
	 * @author Casa Publicadora Brasileira - Davi Aragão
	 * @since 26/12/2017
	 **/
	observeElements (elementsToObserve) {
		const config = {
			rootMargin: '50px 0px',
			threshold: 0.01
		};

		this._onIntersection = this._onIntersection.bind(this);
		let observer = new IntersectionObserver(this._onIntersection, config);
		for (const element of elementsToObserve)
			observer.observe(element);
	}

	/**
	 * Método chamado quando um dos elementos é observado.
	 * Para de observar a entrada que foi afetada.
	 * Carrega a imagem para a entrada afetada.
	 *
	 * @param Array entries - As entradas que foram capturadas pelo observador.
	 * @param IntersectionObserver observer - O observador das entradas.
	 * @return void
	 * @author Casa Publicadora Brasileira - Davi Aragão
	 * @since 26/12/2017
	 **/
	_onIntersection (entries, observer) {
		for (const entry of entries) {
			if (entry.intersectionRatio > 0) {
				observer.unobserve(entry.target);
				this._fetchImage(entry.target).then(() => this.loadImage(entry.target));
			}
		}
	}

	/**
	 * Carrega todas as imagens dos elementos observados instântaneamente.
	 * Método executado caso não exista suporte para IntersectionObserver.
	 *
	 * @param Array HTMLElement elementsToObserve - Os elementos que terão as imagens carregadas sob demanda do veiw port.
	 * @return void
	 * @author Casa Publicadora Brasileira - Davi Aragão
	 * @since 27/12/2017
	 **/
	_loadAllImages (elementsToObserve) {
		for (const element of elementsToObserve)
			this.loadImage(element);

	}

	/**
	 * Carrega a imagem antes de colocá-la na página.
	 *
	 * @param Object element - O elemento que foi observado e contém a imagem.
	 * @return void
	 * @author Casa Publicadora Brasileira - Davi Aragão
	 * @since 27/12/2017
	 **/
	_fetchImage (element) {
		return new Promise((resolve, reject) => {
			const img = new Image();
			img.src = element.dataset.img;
			img.onload = resolve;
			img.onerror = reject;
		});
	}

	/**
	 * Inicia a requisição da imagem.
	 * Caso this.imgType seja 1, carrega a imagem no estilo do elemento.
	 * Caso seja 0 espera-se que se trate de uma tag <img>, coloca a url no src.
	 *
	 * @param Object element - O elemento que foi observado e contém a imagem.
	 * @return void
	 * @author Casa Publicadora Brasileira - Davi Aragão
	 * @since 26/12/2017
	 **/
	loadImage (element) {
		(this.imgType) ? element.style.backgroundImage = `url(${element.dataset.img})` : element.src = element.dataset.img;
	}
}