let firstName = document.getElementById('referFirstName');
let lastName = document.getElementById('referLastName');
let email = document.getElementById('referEmail');
let friendFirstName = document.getElementById('referFriendFN');
let friendLastName = document.getElementById('referFriendLN');
let friendEmail = document.getElementById('referFriendEmail');
let referalForm = document.getElementById('refer-friend');
let successForm = document.getElementById('referalSuccessForm');
let failureForm = document.getElementById('referalFailureForm');
let anotherFormLink = document.getElementById('anotherReferral');
let errorButton = document.getElementById('errorButton');
let formInputs = document.querySelectorAll('input');
let spinner = document.querySelector('.loader');
let indivisualId = '';

submitButton = document.getElementById('refer-friend-primary-button');

for(let i = 0; i < formInputs.length; i++) {
    formInputs[i].addEventListener('input', textInputHandler);
}

email.addEventListener('input', function(e) {
    compareInputs(e, friendEmail);
});
friendEmail.addEventListener('input', textInputHandler);
friendEmail.addEventListener('input', function(e) {
    compareInputs(e, email);
});

anotherFormLink.addEventListener('click', resetFormFriend);

errorButton.addEventListener('click', resetForm);

email.validity.compareError = false;
friendEmail.validity.compareError = false;


function textInputHandler(e) {
    let inputEle = e.target;
    let valid = e.target.validity.valid;          
    
    if (!valid) {
        inputEle.classList.add('invalid');
        let errorMsgEle = document.getElementById(inputEle.id).nextElementSibling;
        placeErrorMSG(errorMsgEle, inputEle.type,inputEle.id, inputEle.validity);
    } else if (valid) {
        inputEle.classList.remove('invalid');
    }

    referalFormValidity();
}

function compareInputs(e, compareToEle) {
    let inputEle = e.target;
    let compareValue = e.target.value;

    if (compareValue === compareToEle.value && compareValue.trim().length > 0 && compareValue.trim().length > 0) {
        inputEle.classList.add('invalid');
        compareToEle.classList.add('invalid');
        inputEle.validity.compareError = true;            
        compareToEle.validity.compareError = true;
        inputEle.setCustomValidity('ERROR');
        compareToEle.setCustomValidity('ERROR');
        let errorMsgEle = document.getElementById(inputEle.id).nextElementSibling;
        let compareEleErrorMsg = document.getElementById(compareToEle.id).nextElementSibling;
        console.log('compareToEle',compareToEle);
        placeErrorMSG(errorMsgEle, inputEle.type,inputEle.id, inputEle.validity, compareToEle.labels[0].textContent)
        placeErrorMSG(compareEleErrorMsg, compareToEle.type,compareToEle.id, compareToEle.validity, inputEle.labels[0].textContent)
    } else {
        inputEle.validity.compareError = false;
        compareToEle.validity.compareError = false;
        inputEle.setCustomValidity('');
        compareToEle.setCustomValidity('');
        if (e.target.validity.valid) {
            inputEle.classList.remove('invalid');                
        }                    
        if (compareToEle.validity.valid) {
            compareToEle.classList.remove('invalid');
        }
    }

    referalFormValidity();
}

function referalFormValidity() {
    if (referalForm.checkValidity()) {
        submitButton.removeAttribute('disabled');
    } else {
        submitButton.setAttribute('disabled', true);
    }
}

function placeErrorMSG(element, inputType,inputId, validity, otherEleName = "") {  
    console.log(element, inputType,inputId, validity);      
    if (validity.valueMissing) {
        element.innerText = 'Field is required';
    } else if (validity.patternMismatch && inputType === 'text' && !inputId.includes('Email')) {
        let inputVal = element.previousSibling.previousElementSibling.value;
        if(inputVal.charAt(inputVal.length - 1) === '-' || inputVal.charAt(inputVal.length - 1) === ' ') {
            element.innerText = 'Cannot end with space or dash';
        } else {
            element.innerText = 'Do not include numbers or symbols';
        }            
    } else if (validity.patternMismatch && inputId.includes('Email')) {
        element.innerText = 'Please enter a valid email';
    } else if (validity.compareError) {
        element.innerText = 'Entered value cannot be the same as ' + otherEleName;
    }
}

  function processForm(form) {
    let valid = validateForm(form);
    spinner.style.display = 'block';
    submitButton.setAttribute('disabled', true);

    indivisualId = GetQueryParameterByName('AG_IND_ID');

   if(isNaN(indivisualId))
   {
     valid = false;
   }

    if (valid) {
        let data = new FormData(form);
        for (var [key, value] of data.entries()) { 
            console.log("Key: " + key + "\nValue: " + value);
        }

        submitReferralProgram();
        
    } else {
        referalForm.style.display = "none";
        successForm.style.display = "none";
        failureForm.style.display = "block";
        console.log('INVALID FORM');
    }


    return false;
}

function validateForm(form) {
    let valid = true;

    for(let i = 0; i < form.length; i++) {
        if (form[i].validity.valid === false) {
            valid = false;
            break;
        }
    }

    
    return valid;
}

function resetForm() {        
    firstName.value = "";
    lastName.value = "";
    email.value = "";
    friendFirstName.value = "";
    friendLastName.value = "";
    friendEmail.value = "";

    spinner.style.display = 'none';
    submitButton.setAttribute('disabled', true);
    referalForm.style.display = "block";
    successForm.style.display = "none";
    failureForm.style.display = "none";
}

function resetFormFriend() {        
    friendFirstName.value = "";
    friendLastName.value = "";
    friendEmail.value = "";

    spinner.style.display = 'none';
    submitButton.setAttribute('disabled', true);
    referalForm.style.display = "block";
    successForm.style.display = "none";
    failureForm.style.display = "none";
}


function goToAnchor(anchor) {
    var loc = document.location.toString().split('#')[0];
    document.location = loc + '#' + anchor;
    return false;
}

function submitReferralProgram() {
var token = document.getElementsByName('__RequestVerificationToken')[0];
var indivisualId = GetQueryParameterByName('AG_IND_ID');
var allData = {
    "LIST_CD": "SVCREF_AN",
    "ORDER_NBR": "SVCREF_AN",
    "VENDOR_NAME": "AUTN",    
    "FIRST_NAME": friendFirstName.value,
    "LAST_NAME": friendLastName.value,
    "EMAIL_ADDRESS": friendEmail.value,
    "CUSTOM_ATTR_01": firstName.value,
    "CUSTOM_ATTR_02": lastName.value,
    "CUSTOM_ATTR_03": email.value,
    "CUSTOM_ATTR_04": indivisualId,
        "Source": "AN",
    "__RequestVerificationToken": token.value
};

if(indivisualId)
{        
var url = "/api/sitecore/ServiceReferralProgram/Save";
var json = JSON.stringify(allData);

(async () => {
  const rawResponse = await fetch(url, {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      '__RequestVerificationToken': token.value
    },
    body: json
  });
  const content = await rawResponse;
  console.log('Referral Program Email Status:', content.status);
  if(content.status === 200) {        
    referalForm.style.display = "none";
    successForm.style.display = "block";
    failureForm.style.display = "none";
 }
else {
    referalForm.style.display = "none";
    successForm.style.display = "none";
    failureForm.style.display = "block";
    console.log('INVALID FORM');
 }
})();       
}
else {
                referalForm.style.display = "none";
                successForm.style.display = "none";
                failureForm.style.display = "block";
                console.log('INVALID FORM');
   }
}