(function () {
	"use strict";

	function init() {
		const productForm = document.querySelector('product-info form');
		if (!productForm) {
			return;
		}

		const button = document.createElement('button');
		button.className = 'product-form__submit button button--full-width button--primary';
		button.innerHTML = `<span>Register now</span>`;
		button.type = 'button';
		button.addEventListener('click', () => onClick());
		productForm.appendChild(button);
	}

	function onClick() {
		fetch('https://ops.thesunshinelane.com/shopify/assets/member-form.html').then(x => x.text()).then(html => {
			const dom = new DOMParser().parseFromString(html, "text/html");
			const els = dom.querySelector("body>:first-child");
			document.body.appendChild(els);

			const form = document.getElementById('tsl-member-form');

			form.addEventListener('submit', async e => {
				e.preventDefault();
				e.stopPropagation();

				e.submitter.disabled = true;

				const props = {};
				const formData = new FormData(form);

				for (const [key, value] of formData.entries()) {
					props[key] = value;
				}

				const variantId = Number(document.querySelector('product-info form input[name="id"]')?.value);

				await fetch(window.Shopify.routes.root + 'cart/clear.js', { method: "POST" });

				const line = {
					id: variantId,
					quantity: 1,
					properties: props
				}

				await fetch(window.Shopify.routes.root + 'cart/add.js', {
					method: "POST",
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify({ items: [line] })
				});

				window.location.href = `/checkout?checkout[email]=${formData.get('_email')}` +
					`&checkout[billing_address][first_name]=${formData.get('_firstName')}` +
					`&checkout[billing_address][last_name]=${formData.get('_lastName')}` +
					`&checkout[billing_address][phone]=%2b61${formData.get('_phone')}`;
			});

		});
	}

	init();
})()