//PRIMARY SELECTIONS

const mainContainer = document.querySelector('.main-container');

const formParts = document.querySelectorAll('.form-part');

const buttonNext1 = document.getElementById('btnNext1');

const privacyPolicyConsent = document.getElementById('privacyPolicyInput');


    if (window !== window.parent) {
        Array.from(document.getElementsByTagName("input"))
            .forEach(function (currentInputElement) {
                currentInputElement.addEventListener("change",
                    function (e) {
                        if (!window.formStarted) {
                            window.parent.postMessage({
                                "assetName": "SFS_Depot_Charging_Contact_Form", //TODO
                                "actionType": "start",
                                "action": "form"
                            }, "*");
                            window.formStarted = true;
                            window.formStartedTime = Date.now();
                        }
                    },
                    false);
            });

    
document.getElementsByClassName('next')[0].addEventListener("click",function() {
                setTimeout(function () {
                    var errors = document.querySelectorAll(".error_border");
                    if (errors.length <= 0) {
    
                        window.formSubmittedTime = Date.now();
                        var ttcMilliseconds = (window.formSubmittedTime - window.formStartedTime);
    
                        var ttc = ttcMilliseconds + " milliseconds";
    
                        var ttcSeconds = Math.round(ttcMilliseconds / 1000);
                        var ttcMinutes = Math.round(ttcSeconds / 60 * 2) / 2;
                        var ttcHrs = Math.round(ttcMinutes / 60 * 2) / 2;
    
                        if (ttcSeconds > 0 && ttcSeconds < 61) {
                            ttc = ttcSeconds + " seconds";
                        } else if (ttcMinutes > 0 && ttcMinutes < 61) {
                            ttc = ttcMinutes + " minutes";
                        } else if (ttcHrs > 0) {
                            ttc = ttcHrs + " hours";
                        }
    
                        window.parent.postMessage({
                            "assetName": "SFS_Depot_Charging_Contact_Form", //TODO
                            "actionType": "submit",
                            "action": "form",
                            "timeToComplete": ttc
                        }, "*");
                    } else {
                        var errorFields = [];
                        for (var i = 0; i < errors.length; i++) {
                            for (var j = 0; j < errors[i].labels.length; j++) {
                                errorFields.push(errors[i].labels[j].textContent.trim())
                            }
                        }
                        window.parent.postMessage({
                            "assetName": "SFS_Depot_Charging_Contact_Form",
                            "actionType": "error",
                            "action": "form",
                            "inputNames": errorFields
                        }, "*");
                    }
                }, 100);
            },
            false);
    }

//DATA VALIDATION SELECTIONS

const form = document.getElementById('form');
const firstName = document.getElementById('firstNameInput');
const lastName = document.getElementById('lastNameInput');
const email = document.getElementById('emailInput');
const phone = document.getElementById('phoneInput');
const companyName = document.getElementById('companyNameInput');
const country = document.getElementById('countries');
const jobTitle = document.getElementById('jobTitleInput');

const blank = '&nbsp;'

const errorMessageAlerts = document.querySelectorAll('.alert');

//ERROR MESSAGES

const errorMessages = {
 genericError: 'This field cannot be left blank',
 lNameError: 'The Last Name field cannot be left blank',
 fNameError: 'The First Name field cannot be left blank',
 compNameError: 'The Company Name field cannot be left blank',
 emailError1: 'The Email address field cannot be left blank',
 emailError2: 'Please enter a valid business email address. e.g: name@company.com',
 phoneError1: 'The Contact Number field cannot be left blank',
 phoneError2: 'Please enter a valid phone number including country code starting with “+”',
 jobTitleError: 'The Job Title field cannot be left blank',
 privacyError: 'Please check privacy box to submit form',
                      countryError: 'Please choose a Country'
}



const checkInputValidity = [

 {
   firstNameCheck: false,
   lastNameCheck: false,
   companyNameCheck: false,
  emailCheck: false,
  phoneCheck: false,
  jobTitleCheck: false,
  privacyCheck: false,
                      countryCheck: false
 }

];





buttonNext1.addEventListener('click', checkFormInputs);



//PERSONAL INPUTS CHECK

function checkFormInputs() {
  const firstNameValue = firstName.value.trim();
  const lastNameValue = lastName.value.trim();
  const compNameValue = companyName.value.trim();
 const emailValue = email.value.trim();
 const jobTitleValue = jobTitle.value.trim(); 

    $('#country_input').attr('value', ($("#countries").val())); // GIVES UPDATED VALUE TO THE ELEMENT

  //check country input
  if ( $('#countries').val() == '') {
    setError(country, errorMessages.countryError)
   
    checkInputValidity[0].countryCheck = false;
   } else {
    removeError(country, blank);
    checkInputValidity[0].countryCheck = true;
   }

                      
   //check firstName input
   if (firstNameValue === '' || firstNameValue == null) {
    setError(firstName, errorMessages.fNameError)
   
    checkInputValidity[0].firstNameCheck = false;
   } else {
    removeError(firstName, blank);
    $('#firstNameInput').attr('value', ($("#firstNameInput").val()));// GIVES UPDATED VALUE TO THE ELEMENT
    checkInputValidity[0].firstNameCheck = true;
   }


      //check lastName input
      if (lastNameValue === '' || lastNameValue == null) {
        setError(lastName, errorMessages.lNameError)
       
        checkInputValidity[0].lastNameCheck = false;
       } else {
        removeError(lastName, blank);
        $('#lastNameInput').attr('value', ($("#lastNameInput").val())); // GIVES UPDATED VALUE TO THE ELEMENT
        checkInputValidity[0].lastNameCheck = true;
       }

        //check copmName input
      if (compNameValue === '' || compNameValue == null) {
        setError(companyName, errorMessages.compNameError)
       
        checkInputValidity[0].companyNameCheck = false;
       } else {
        removeError(companyName, blank);
        $('#companyNameInput').attr('value', ($("#companyNameInput").val())); // GIVES UPDATED VALUE TO THE ELEMENT
        checkInputValidity[0].companyNameCheck = true;
       }
                      
        //check jobTitle input
      if (jobTitleValue === '' || jobTitleValue == null) {
        setError(jobTitle, errorMessages.jobTitleError)
                      
         checkInputValidity[0].jobTitleCheck = false;
   } else {
    removeError(jobTitle, blank);
    $('#jobTitleInput').attr('value', ($("#jobTitleInput").val()));// GIVES UPDATED VALUE TO THE ELEMENT
    checkInputValidity[0].jobTitleCheck = true;
   }                   

 //check phone input
 if (phoneValue === '' || phoneValue == null) {
  setError(phone, errorMessages.phoneError1)
  
  checkInputValidity[0].phoneCheck = false;
 } else if (!validPhone(phoneValue)) {
  setError(phone, errorMessages.phoneError2)
 
  checkInputValidity[0].phoneCheck = false;
 } else {
  removeError(phone, blank);
  $('#phoneInput').attr('value', ($("#phoneInput").val())); // GIVES UPDATED VALUE TO THE ELEMENT
  checkInputValidity[0].phoneCheck = true;
 }
              

 // check email input
 if (emailValue === '' || emailValue == null) {
  setError(email, errorMessages.emailError1)
 
  checkInputValidity[0].emailCheck = false;
 } else if (!validEmail(emailValue)) {
  setError(email, errorMessages.emailError2)
  
  checkInputValidity[0].emailCheck = false;
 } else {
  removeError(email, blank);
  $('#emailInput').attr('value', ($("#emailInput").val())); // GIVES UPDATED VALUE TO THE ELEMENT
  checkInputValidity[0].emailCheck = true;
 }

 if (!privacyPolicyConsent.checked) {
  setError(privacyPolicyConsent, errorMessages.privacyError)
 
  checkInputValidity[0].privacyCheck = false;
 } else {
  removeError(privacyPolicyConsent, blank);
  checkInputValidity[0].privacyCheck = true;

 }


 if (Object.values(checkInputValidity[0]).every(Boolean)) {
  document.getElementById("formSubmit").value = "true";                                                           
  form.submit();
 }

}






//SET ERROR FUNCTION
function setError(input, message) {

 const parent = input.parentElement;
 const para = parent.querySelector('p');

 //add error message
 para.innerText = message;
                      
para.tabIndex = 0;
 para.focus();
                      
 //add error classes
 input.classList.add('error_border');
 para.classList.add('error_message');

}


//REMOVE ERROR FUNCTION
function removeError(input, message) {

 const parent = input.parentElement;
 const para = parent.querySelector('p');

 //remove error message
 para.innerText = message;
para.tabIndex = -1
 //remove error class
 input.classList.remove('error_border');
 para.classList.remove('error_message');

}



//REGEX EXPRESSIONS

//Checks whether email format is valid
function validEmail(email) {
 return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}

//Checks whether phone number format is valid

function validPhone(phone) {
   return /^\+\d{4,14}$/g.test(phone);
}