import '@internetstiftelsen/styleguide/dist/molecules/form';
import {open, close, onClose, onOpen} from '@internetstiftelsen/styleguide/dist/molecules/modal/modal';
import Bugsnag from '@bugsnag/js';
import track from "local/track";
import './components';
import api from "local/lib/api";
import 'a11y-toggle';

/**
 * Import javascript components from IIS Styleguide.
 */
import '@internetstiftelsen/styleguide/dist/atoms/password-toggle/password-toggle';
import '@internetstiftelsen/styleguide/dist/utilities/tab-highlighting/tab-highlighting';
import '@internetstiftelsen/styleguide/dist/molecules/system-error/system-error';
import '@internetstiftelsen/styleguide/dist/organisms/accordion/accordion';
import '@internetstiftelsen/styleguide/dist/organisms/mailchimp/mailchimp';
import '@internetstiftelsen/styleguide/dist/organisms/mega-menu/mega-menu';
import '@internetstiftelsen/styleguide/dist/molecules/share/share';
import '@internetstiftelsen/styleguide/dist/molecules/natural-language-form/natural-language-form';
import '@internetstiftelsen/styleguide/dist/atoms/tooltip/tooltip';
import '@internetstiftelsen/styleguide/dist/focusTrap';
import '@internetstiftelsen/styleguide/dist/assets/js/conditional';
import '@internetstiftelsen/styleguide/dist/atoms/file/file';
import '@internetstiftelsen/styleguide/dist/atoms/file/filePreview';
import '@internetstiftelsen/styleguide/dist/assets/js/responsivePosition';
import '@internetstiftelsen/styleguide/dist/assets/js/youtube';
import '@internetstiftelsen/styleguide/dist/molecules/alert/alert';
import '@internetstiftelsen/styleguide/dist/organisms/tabs/tabs';
import '@internetstiftelsen/styleguide/dist/assets/js/textToggle';
import '@internetstiftelsen/styleguide/dist/assets/js/iconToggle';
import '@internetstiftelsen/styleguide/dist/assets/js/charCounter';

if (process.env.BUGSNAG_JS_API_KEY) {
	Bugsnag.start({
		apiKey: process.env.BUGSNAG_JS_API_KEY,
		notifyReleaseStages: ['production', 'staging'],
		releaseStage: process.env.WP_ENVIRONMENT_TYPE,
		collectUserIp: false,
	});
}

/**
 * Main entry point for the javascript bundle.
 */
console.log('🎉 Goto10 is up and running');

/**
 * Import rich text if rich text fields
 */
const richText = document.querySelectorAll('[data-rich-text]');

if (richText.length) {
	import('@internetstiftelsen/styleguide/dist/atoms/textarea/rich-text')
		.then(() => console.log('Rich text 🤯'))
		.catch(() => console.log('No rich text 🤔'));
}

/**
 * Prevent default on a11y-toggle links/buttons
 */
document.addEventListener('click', (e) => {
	if (e.target.closest('[data-a11y-toggle]')) {
		e.preventDefault();
	}
});

/**
 * Modal toggle
 */
document.addEventListener('click', (e) => {
	if (e.target.closest('[data-modal-toggle]')) {
		const modal = document.getElementById(e.target.getAttribute('data-modal-toggle'));

		if (!modal) {
			return;
		}

		modal.setAttribute('aria-hidden', 'true');

		[].forEach.call(document.querySelectorAll(`[data-a11y-toggle="${modal.id}"]`), (el) => {
			el.setAttribute('aria-expanded', 'false');
		});
	}
});

function checkSession(el) {
	let spinner = el.querySelector('.modal-view-spinner');
	const timer = setTimeout(() => {
		el.style.opacity = 1;

		if (!spinner) {
			const html = `
				<svg class="icon u-icon u-icon--large">
					<use xlink:href="#icon-spinner"></use>
				</svg>
			`;

			spinner = document.createElement('div');

			spinner.innerHTML = html;
			el.firstElementChild.appendChild(spinner);
		} else {
			spinner.style.display = 'block';
		}
	}, 250);

	el.querySelector('form').style.display = 'none';
	el.style.opacity = 0;

	api('goto10/v2/is-logged-in', null, 'GET')
		.then((loggedIn) => {
			clearTimeout(timer);

			if (loggedIn) {
				close();
				open({
					title: 'Redan inloggad',
					content: '<p>Du är redan inloggad.</p>',
					actions: [
						{
							text: 'Ok',
							modifier: 'primary',
							attrs: {
								'data-modal-close': null,
							},
						},
					],
				});
			} else {
				if (spinner) {
					spinner.style.display = 'none';
				}

				el.querySelector('form').style.display = null;
			}

			el.style.opacity = 1;
		})
		.catch(() => {
			clearTimeout(timer);
			close();
			open({
				title: 'Sessionen har gått ut.',
				content: '<p>Vänligen ladda om sidan och försök igen.</p>',
				actions: [
					{
						text: 'Ladda om',
						modifier: 'primary',
						url: document.location.href,
					},
				],
			});
		});
}

onOpen((el) => {
	if (['modal-login', 'modal-register'].includes(el.id)) {
		checkSession(el);
	}
});

/**
 * Handle Modal set by backend
 */
if ( 'g10Modal' in window ) {
	open({
		title: window.g10Modal.title,
		content: window.g10Modal.text,
		actions: window.g10Modal.actions || [],
	});

	if ('track' in window.g10Modal) {
		window.g10Modal.track.forEach((e) => {
			track(e.event, e.data);
		});
	}
}

/**
 * Empty registration form on close
 */
onClose((el) => {
	const form = el.querySelector('form');

	if (form) {
		form.reset();
	}
});

/**
 * Track registration
 */
const registerForm = document.querySelector('#modal-register [data-form]');

if (registerForm) {
	registerForm.form.events.on('success', () => track('non_verified_sign_up'));
}