import { Template } from 'meteor/templating';
import Swal from 'sweetalert2';
import './Public.html';

Template.Public.events({
	'click .barButton': function(event, template) {
		template.$('.dropMenu').toggle();
	},
	'click .donateMenu': function(event, template) {
		let linkOnce = "https://checkout.square.site/pay/5c55a7a6f6bf443baf5b231762bd63ec";
		let openOnce = "window.open('" + linkOnce + "', '_blank')";
		let linkMonthly = "https://checkout.square.site/pay/fac3678095144f02b4cab4f8efa6e203";
		let openMonthly = "window.open('" + linkMonthly + "', '_blank')";
		let linkAnnually = "https://checkout.square.site/pay/3a9ab812d91f4a749bdae9f7c390273c";
		let openAnnually = "window.open('" + linkAnnually + "', '_blank')";
		
		Swal.fire({
			title: 'How would you like to donate?',
			showCancelButton: true,
			showCloseButton: false,
			showConfirmButton: false,
			icon: 'question',
			//html: '<ul class="donateList">' +
			//	'<li class="donateLink donateOnce"><button type="button" class="swal2-styled" onclick="' + openOnce + '">Once</button></li>' +
			//	'<li class="donateLink donateOnce"><button type="button" class="swal2-styled" onclick="' + openMonthly + '">Monthly</button></li>' +
			//	'<li class="donateLink donateOnce"><button type="button" class="swal2-styled" onclick="' + openAnnually + '">Annually</button></li>' +
			//	'</ul>'
			html: '<div class="btn-group" role="group" aria-label="Donation Types">' +
				'<button type="button" class="swal2-styled btn btn-secondary" onclick="' + openOnce + '">Once</button>' +
				'<button type="button" class="swal2-styled btn btn-secondary" onclick="' + openMonthly + '">Monthly</button>' +
				'<button type="button" class="swal2-styled btn btn-secondary" onclick="' + openAnnually + '">Annually</button>' +
				'</div>'
		});
	}
});