/* eslint-env browser */

import './css/main.css';

loadGoogleTagManager('GTM-TZFNZMF');

const instafeedElement = document.querySelector('.instafeed');

if ('IntersectionObserver' in window) {
	const observer = new IntersectionObserver(
		(entries) => {
			entries.forEach((entry) => {
				if (entry.isIntersecting) {
					loadInstafeed(entry.target);
					observer.disconnect();
				}
			});
		},
		{threshold: 0}
	);

	observer.observe(instafeedElement);
} else {
	loadInstafeed(instafeedElement);
}

function loadInstafeed(target) {
	import('instafeed.js').then(({default: Instafeed}) => createInstafeed({Instafeed, target}));
}

function createInstafeed({Instafeed, target}) {
	return fetch(
		'https://ig.instant-tokens.com/users/9af08e41-25eb-4ebc-96f9-bd8d5cda4b4b/instagram/17841400413312724/token?userSecret=wdo96hovcaf1d9xzsh7q9w'
	)
		.then(handleResponse)
		.then((result) => {
			if (result.ok) {
				const large = window.matchMedia('(min-width: 768px)');

				new Instafeed({
					limit: large.matches ? 16 : 8,
					accessToken: result.Token,
					target
				}).run();
			}
		});
}

function handleResponse(response) {
	if (response.ok) {
		return response.json().then(tokenResult);
	}

	return Promise.resolve({ok: false});
}

function tokenResult({Token}) {
	return {ok: true, Token};
}

function loadGoogleTagManager(id) {
	window.dataLayer = window.dataLayer || [];
	window.dataLayer.push({'gtm.start': Date.now(), event: 'gtm.js'});
	const f = document.querySelector('script');
	const j = document.createElement('script');
	j.async = true;
	j.src = `https://www.googletagmanager.com/gtm.js?id=${id}`;
	f.parentNode.insertBefore(j, f);
}

/* eslint-env browser */

import './css/main.css';

loadGoogleTagManager('GTM-TZFNZMF');
const instaFeedPromise = loadInstafeed();

onIntersection('.instafeed', (target) => {
	instaFeedPromise
		.then(createInstafeed(target))
		.then((instafeed) => instafeed.run())
		.catch(console.error);
});

function onIntersection(target, callback) {
	const element = document.querySelector(target);
	if ('IntersectionObserver' in window) {
		const observer = new IntersectionObserver(
			(entries) => {
				entries.forEach((entry) => {
					if (entry.isIntersecting) {
						callback(entry.target);
						observer.disconnect();
					}
				});
			},
			{threshold: 0}
		);

		observer.observe(element);
	} else {
		setTimeout(callback.bind(undefined, element));
	}
}

function createInstafeed(target) {
	return function ([Instafeed, accessToken]) {
		const large = window.matchMedia('(min-width: 768px)');

		return new Instafeed({
			limit: large.matches ? 16 : 8,
			accessToken,
			target
		});
	};
}

function loadInstafeed() {
	return Promise.all([importInstafeed(), loadInstagramToken()]);

	function importInstafeed() {
		return import('instafeed.js').then((instafeed) => instafeed.default);
	}

	function loadInstagramToken() {
		return fetch(
			'https://ig.instant-tokens.com/users/9af08e41-25eb-4ebc-96f9-bd8d5cda4b4b/instagram/17841400413312724/token?userSecret=wdo96hovcaf1d9xzsh7q9w'
		).then(handleResponse);
	}

	function handleResponse(response) {
		if (response.ok) {
			return response.json().then(({Token}) => Token);
		}

		return Promise.reject(new Error(`Failed to fetch token. ${response.status}: ${response.statusText}`));
	}
}

function loadGoogleTagManager(id) {
	window.dataLayer = window.dataLayer || [];
	window.dataLayer.push({'gtm.start': Date.now(), event: 'gtm.js'});
	const f = document.querySelector('script');
	const j = document.createElement('script');
	j.async = true;
	j.src = `https://www.googletagmanager.com/gtm.js?id=${id}`;
	f.parentNode.insertBefore(j, f);
}

speed up instagram loading