"use strict";

let newsletter_form;
let newsletter_input_mail_address;
let newsletter_input_language;
let newsletter_input_language_option_list;
let newsletter_input_submit;
let newsletter_feedback;
let newsletter_feedback_wait;
let newsletter_feedback_success;
let newsletter_feedback_failure;

let newsletter_valid_mail_address = false;
let newsletter_valid_language = false;

window.addEventListener("load", function(){
	// STORE ELEMENTS //
	newsletter_form = document.getElementById("newsletter-signup-form");
	newsletter_input_mail_address = document.getElementById("newsletter-signup-form-mail-address");
	newsletter_input_language = document.getElementById("newsletter-signup-form-language");
	newsletter_input_language_option_list = newsletter_input_language.getElementsByClassName("option");
	newsletter_input_submit = document.getElementById("newsletter-signup-form-submit");
	newsletter_feedback = document.getElementById("newsletter-signup-form-feedback");
	newsletter_feedback_wait = document.getElementById("newsletter-signup-form-feedback-wait");
	newsletter_feedback_success = document.getElementById("newsletter-signup-form-feedback-success");
	newsletter_feedback_failure = document.getElementById("newsletter-signup-form-feedback-failure");
	
	
	// INITIALIZE INPUTS //
	newsletter_init_mail_address();
	newsletter_init_language();
	newsletter_init_submit();
});



/**
* HELPER: Initialize mail address input.
*/
async function newsletter_init_mail_address(){
	// REGISTER INPUT HANDLER //
	newsletter_input_mail_address.addEventListener("input", newsletter_update_mail_address);
}



/**
* HELPER: Initialize language input.
*/
async function newsletter_init_language(){
	// REGISTER CLICK HANDLERS //
	for(let one_option of newsletter_input_language_option_list){
		one_option.addEventListener("click", newsletter_change_language);
	}
	
	
	// UPDATE STATE //
	newsletter_update_language();
}



/**
* HELPER: Initialize submit button input.
*/
async function newsletter_init_submit(){
	// REGISTER CLICK HANDLER //
	newsletter_input_submit.addEventListener("click", newsletter_submit);
	
	
	// UPDATE STATE //
	newsletter_update_submit();
}



/**
* CALLBACK: Update mail address state.
*/
async function newsletter_update_mail_address(){
	// VALIDATE INPUT //
	// load value
	let value = newsletter_input_mail_address.value;
	
	// check against regex
	newsletter_valid_mail_address = (value.match(/^[a-zA-Z0-9\.\-\_\+]+@([a-z0-9\-]+\.)+[a-z0-9\-]{2,}$/) !== null);
	
	
	// UPDATE VALIDITY INDICATOR //
	// get element
	let validity_indicator = newsletter_input_mail_address.parentElement;
	
	// reset state
	validity_indicator.classList.remove("valid", "invalid");
	
	// set state
	if(newsletter_valid_mail_address){
		validity_indicator.classList.add("valid");
	} else {
		validity_indicator.classList.add("invalid");
	}
	
	
	// UPDATE SUBMIT BUTTON //
	newsletter_update_submit();
}



/**
* CALLBACK: Change language.
*/
async function newsletter_change_language(){
	// DETERMINE NEW VALUE //
	// get from attribute
	let value = this.dataset.value;
	
	// store to main element
	newsletter_input_language.dataset.selected = value;
	
	
	// UPDATE STATE //
	newsletter_update_language();
}



/**
* HELPER: Update language state.
*/
async function newsletter_update_language(){
	// HIGHLIGHT SELECTED ELEMENT //
	let value = newsletter_input_language.dataset.selected;
	newsletter_valid_language = false;
	for(let one_option of newsletter_input_language_option_list){
		// reset classes
		one_option.classList.remove("selected");
		
		// selected
		if(one_option.dataset.value === value){
			newsletter_valid_language = true;
			one_option.classList.add("selected");
		}
	}
	
	
	// UPDATE SUBMIT BUTTON //
	newsletter_update_submit();
}



/**
* HELPER: Update submit button state.
*/
async function newsletter_update_submit(){
	// DISABLE //
	newsletter_input_submit.classList.add("disabled");
	
	
	// MAYBE ENABLE //
	if(newsletter_valid_mail_address && newsletter_valid_language){
		newsletter_input_submit.classList.remove("disabled");
	}
}



/**
* CALLBACK: Maybe submit the form.
*/
async function newsletter_submit(){
	// MAKE SURE ALL INPUTS ARE VALID //
	if(!newsletter_valid_mail_address || !newsletter_valid_language) return;
	
	
	// SHOW WAIT FEEDBACK //
	newsletter_feedback.classList.remove("hidden", "gone");
	newsletter_form.classList.add("hidden");
	newsletter_feedback_wait.classList.remove("hidden", "gone");
	
	
	// COLLECT VALUES //
	// mail address
	let mail_address = newsletter_input_mail_address.value;
	
	// language
	let language = newsletter_input_language.dataset.selected;
	
	
	// SEND API REQUEST //
	var xhr = new XMLHttpRequest();
	xhr.open("POST", "/api/newsletter/verify", true);
	xhr.setRequestHeader("Content-Type", "application/json");
	xhr.setRequestHeader("x-cookieless-csrf-protection", "42");
	xhr.send(JSON.stringify({
		mail_address: mail_address,
		language: language
	}));
	
	xhr.onload = function(){
		let success = true;
		
		// validate http status code
		if(xhr.status !== 200) success = false;
		
		// check response
		if(success){
			let response = null;
			try {
				response = JSON.parse(xhr.response);
			} catch(e){}
			
			if(typeof response !== "object") success = false;
			if(success && response === null) success = false;
			if(success && response.success !== true) success = false;
		}
		
		// positive feedback
		if(success){
			newsletter_feedback_wait.classList.add("gone");
			newsletter_feedback_success.classList.remove("hidden", "gone");
			return;
		}
		
		// negative feedback
		newsletter_feedback_wait.classList.add("gone");
		newsletter_feedback_failure.classList.remove("hidden", "gone");
	}
}