import RegisterForm from './register-area/register-form.vue'
import '../scss/main.scss'
import { createApp } from 'vue'
importAll(require.context('../images', false, /\.(png|jpe?g|svg)$/))

let heroText = document.querySelectorAll(".landing-hero h2,.landing-hero p")
let registerToggles = document.querySelectorAll(".register-btn, .register-area\
	.cancel-button, .services-cards button")
let token = getCookie('XSRF-TOKEN')
const app = createApp(RegisterForm)

// app.component('register-form', {
// 	template: registerForm
// })

app.mount('#app')

function importAll(r) {
	return r.keys().map(r)
}

function getCookie(name) {
  var re = new RegExp(name + "=([^;]+)")
  var value = re.exec(document.cookie)

  return (value != null) ? unescape(value[1]) : null
}

function getToken() {
	fetch("/sanctum/csrf-cookie", {
		method: 'GET'
	}).then( () => {
		token = getCookie('XSRF-TOKEN')
	})
}

function checkPasswords() {
	let passInput = document.getElementById('register-password')
	let passInput2 = document.getElementById('confirm-password')
	if (passInput.value != passInput2.value) {
		passInput2.setCustomValidity('Passwords must be matching')
	} else {
		passInput2.setCustomValidity('');
	}
}

function login(event) {
	fetch("/login", {
		method: 'POST',
		headers: {'Content-Type': 'application/json',
		'X-XSRF-TOKEN': token},
		body: JSON.stringify({"email":
			document.getElementById("login_email").value,
		"password": document.getElementById("login_password").value}),
	}).then(response => {
		console.log(response.json())
		console.log(response.ok)
		console.log(response.status)
		console.log(response.statusText)
	})
	event.preventDefault();
}

//Attempt to resend the verification link
function resendLink(event) {
	console.log("clicked");
	event.preventDefault();

}

function toggleNav() {
	heroText.forEach(item => {
		item.classList.toggle("hidden")
	})
	document.querySelector("nav form.login").classList.toggle("active")
	this.classList.toggle("toggled")
}

if (!token) {getToken()}

if (window.location.pathname == '/') {
	document.getElementById('nav_toggle').addEventListener('click', toggleNav)
	document.getElementById('login_form').addEventListener('submit', login)

	//Triggers for registration menu
	for (let i = 0; i < registerToggles.length; i++) {
		registerToggles[i].addEventListener("click", function() {
		document.querySelector(".register-area").classList.toggle("active")
		});
	}

	//FAQ collapsibles
	let cols = document.getElementsByClassName("collapsible");

	for (let i = 0; i < cols.length; i++) {
		cols[i].addEventListener("click", function() {
			this.classList.toggle("active");
		});
	}
	document.getElementById("register-password").oninput = checkPasswords
	document.getElementById("confirm-password").oninput = checkPasswords
} else if (window.location.pathname == '/verify-email') {
	document.getElementById('resend_verification').addEventListener("click", resendLink)
}