var html5QrCode;
var loader;
var cardModal;
var cardModalEl;
var errorModal;
var errorModalEl;
const cameraOptions = { facingMode: 'environment' };
const scannerOptions = { fps: 10 };

function scannerStart() {
	html5QrCode.start(
		cameraOptions,
		scannerOptions,
		scannerSuccessCallback
	);
}

function scannerPause() {
	html5QrCode.pause();
}

function scannerResume() {
	html5QrCode.resume();
}

function showCardModal(cardCode, redeemed, cardHtml) {
	jQuery(cardModalEl).attr('data-card-code', cardCode);

	if (redeemed === null) {
		jQuery(cardModalEl).find('#cancelRedemptionButton').hide();
		jQuery(cardModalEl).find('#redeemButton').show();
	} else {
		jQuery(cardModalEl).find('#cancelRedemptionButton').show();
		jQuery(cardModalEl).find('#redeemButton').hide();
	}

	jQuery(cardModalEl).find('.modal-title').html(cardCode);
	jQuery(cardModalEl).find('.modal-body').html(cardHtml);
	cardModal.show();
}

function showErrorModal(error) {
	jQuery(errorModalEl).find('.modal-body p').html(error);
	errorModal.show();
}

const scannerSuccessCallback = (cardCode) => {
	loader.show();

	jQuery.ajax({
		cache: false,
		url: 'index.php?option=com_cmgiftcard&task=scanner.find&format=json&' + token + '=1&recent=1&code=' + cardCode,
		type: 'get',
		dataType: 'json',
		success: function(r) {
			if (r.success) {
				showCardModal(cardCode, r.data.card.redeemed, r.data.card.html);
				jQuery('#recent').html(r.data.recent);
			} else {
				if (r.message) {
					showErrorModal(r.message);
				}
			}
		},
		complete: function() {
			loader.hide();
		},
	});
};

function getCard(cardCode) {
	loader.show();

	jQuery.ajax({
		cache: false,
		url: 'index.php?option=com_cmgiftcard&task=scanner.find&format=json&' + token + '=1&code=' + cardCode,
		type: 'get',
		dataType: 'json',
		success: function(r) {
			if (r.success) {
				showCardModal(cardCode, r.data.card.redeemed, r.data.card.html);
			} else {
				if (r.message) {
					showErrorModal(r.message);
				}
			}
		},
		complete: function() {
			loader.hide();
		},
	});
}

function setRedemption(redeemed) {
	loader.show();
	var cardCode = jQuery(cardModalEl).attr('data-card-code');
	var url = 'index.php?option=com_cmgiftcard&task=scanner.setRedemption';
	url += '&redeemed=' + redeemed + '&format=json&' + token + '=1&code=' + cardCode;

	jQuery.ajax({
		cache: false,
		url: url,
		type: 'post',
		success: function(r) {
			if (r.success) {
				cardModal.hide();
				showCardModal(cardCode, r.data.card.redeemed, r.data.card.html);
			} else {
				if (r.message) {
					showErrorModal(r.message);
				}
			}
		},
		complete: function() {
			loader.hide();
		},
	});
}

jQuery(document).ready(function() {
	loader = jQuery('#loader');
	cardModalEl = document.querySelector('#cardModal');
	cardModal = bootstrap.Modal.getOrCreateInstance(cardModalEl);
	errorModalEl = document.querySelector('#errorModal');
	errorModal = bootstrap.Modal.getOrCreateInstance(errorModalEl);
	html5QrCode = new Html5Qrcode('scanner');

	cardModalEl.addEventListener('show.bs.modal', function() {
		scannerPause();
	});

	cardModalEl.addEventListener('hidden.bs.modal', function() {
		jQuery(cardModalEl).find('#cardModalLabel').html('');
		jQuery(cardModalEl).find('.modal-body').html('');
		scannerResume();
	});

	errorModalEl.addEventListener('show.bs.modal', function() {
		scannerPause();
	});

	errorModalEl.addEventListener('hidden.bs.modal', function() {
		jQuery(errorModalEl).find('.modal-body p').html('');
		scannerResume();
	});

	scannerStart();

	jQuery('html,document').on('click', '.scanned-card', function(e) {
		e.preventDefault();
		var cardCode = jQuery(this).attr('data-card-code');

		getCard(cardCode);
	});

	jQuery('#cancelRedemptionButton').on('click', function(e) {
		e.preventDefault();

		setRedemption(0);
	});

	jQuery('#redeemButton').on('click', function(e) {
		e.preventDefault();

		setRedemption(1);
	});
});