const getElementByClass=(cls)=>{return document.getElementsByClassName(cls);}
const getElementById=(id)=>{return document.getElementById(id);}
let filteredName=[],tempFilteredName=[],organizationName=[];
let rules=Array.from(getElementByClass("rules"));
let organizationInput=getElementById("organization");
let indicatorcontainer=document.getElementsByClassName("indicatorcontainer")[0];
let textField=Array.from(getElementByClass("text-field"));
let sumbitBtn=getElementById("create-account");
let username=getElementById("username");
let password=getElementById("password");
let reEnterPassword=getElementById("re-enter-password-field");
let validation=Array.from(getElementByClass("validations"));
let right=getElementByClass("right");
let idle=getElementByClass("idle");
let wrong=getElementByClass("wrong");
const character = new RegExp("^(?=.*[a-z])(?=.*[A-Z]).+$");
const uppercaseRegx = /[A-Z]/;
const lowerCaseRegs = /[a-z]/;
const number=new RegExp("^(?=.*\\d).+$");
//const special=new RegExp("^(?=.*[-+_!@#$%^&*.,?]).+$");
const special=new RegExp("^(?=.*[^a-zA-Z0-9~\"'<>|%^&*{}\\[\\]:;])[^~\"'<>|%^&*{}\\[\\]:;]*$");
let checked=getElementById("checkbox");
let passwordValidationCount=0;
let errorFlag=true;
const baseUrl="https://devex-portal-bff-non-prod.dev.dbk.ncr.com";
let indicatorLeft=getElementByClass("indicator-left")[0];
let indicatorMiddle=getElementByClass("indicator-middle")[0];
let indicatorRight=getElementByClass("indicator-right")[0];
let fieldContainer=getElementByClass("field-container");
let fieldLabels=getElementByClass("field-labels");
let termsError=getElementById("termserror");
let donotMatch=getElementById("donotmatch");
let errortext=getElementByClass("errortext");
let invalidEmail=getElementByClass("invalidemail");
let re_Enter_Password=getElementById("re-enter-password");
let enterPassword=getElementById("enter-password");
let strong=getElementById("strong");
let medium=getElementById("medium");
let weak=getElementById("weak");
let statusCode=0;
const container= getElementByClass("onboarding-container")[0];
const inputs=Array.from(document.getElementsByTagName("input"));
const modalContent=document.getElementById("modal").childNodes;
enterPassword.childNodes[0].style.display="block";
re_Enter_Password.childNodes[0].style.display="block";
checked.checked=false;
checked.addEventListener('keydown', function (e) {
     if (event.key === "Enter") {
      checked.checked=!checked.checked;
	if(checked.checked){
      		document.styleSheets[3].cssRules[11].style.content='url("https://cdn.prod.website-files.com/65d2d5a795685961fec4d976/664d87be4d0cfb953b7deda3_tickicpon.svg")';
	}
	else{
      		document.styleSheets[3].cssRules[11].style.content='';

	}
     }
});

const trapFcous=(e)=>{
	if(e.key==="Tab"){
		const focusableEle= modalContent;
		const firstEle= focusableEle[0];
		const lastEle= getElementById("agree-btn");
		if(document.activeElement===lastEle && !e.shiftKey){
			e.preventDefault();
			firstEle.focus();
		}else if(document.activeElement=== firstEle && e.shiftKey){
			e.preventDefault();
			lastEle.focus();
		}	
		
	}
} 
getElementById("tandcmodalblock").addEventListener("keydown",function(e){
	trapFcous(e);
});
getElementById("close-btn").addEventListener("click",function(e){
	document.body.style.overflow="auto";
});

getElementById("agree-btn").addEventListener("click",function(e){
	document.body.style.overflow="auto";
});
getElementById("agree-btn").addEventListener("keydown",function(e){
	if (e.key === "Enter") {
		e.preventDefault();
		getElementById("checkbox").checked=true;
		if(checked.checked){
      			document.styleSheets[3].cssRules[11].style.content='url("https://cdn.prod.website-files.com/65d2d5a795685961fec4d976/664d87be4d0cfb953b7deda3_tickicpon.svg")';
		}
		else{
      			document.styleSheets[3].cssRules[11].style.content='';

		}
        	termsError.style.display="none";
        	checked.classList.remove("check-error");
		document.body.style.overflow="auto";
		getElementById("tandcmodalblock").style.display="none";
		sumbitBtn.focus();
	}
});
getElementByClass("terms-and-condition-modal-container")[1].addEventListener("click",function(e){
	document.body.style.overflow="auto";
});

getElementById("agree-btn").addEventListener("click",function(e){
    getElementById("checkbox").checked=true;
  if(checked.checked){
      document.styleSheets[3].cssRules[11].style.content='url("https://cdn.prod.website-files.com/65d2d5a795685961fec4d976/664d87be4d0cfb953b7deda3_tickicpon.svg")';
  }
  else{
      document.styleSheets[3].cssRules[11].style.content='';

  }
    termsError.style.display="none";
    checked.classList.remove("check-error");
});


getElementByClass("terms-and-condition-link")[0].addEventListener("click", async function(e){
		//e.preventDefault();
		await document.getElementsByClassName("onboarding-container")[0].scrollIntoView();
		//getElementByClass("tandc-modal-block")[0].style.display="flex";
                setTimeout(()=>getElementById("close-btn").focus(), 50);
		
		document.body.style.overflow="hidden";
		document.getElementsByClassName("tandc-container")[0].scrollIntoView();
});

getElementByClass("terms-and-condition-link")[0].addEventListener("keydown", async function(e){
	if (event.key === "Enter") {
		e.preventDefault();
		await document.getElementsByClassName("onboarding-container")[0].scrollIntoView();
		getElementByClass("tandc-modal-block")[0].style.display="flex";
		document.body.style.overflow="hidden";
		document.getElementsByClassName("tandc-container")[0].scrollIntoView();
		getElementByClass("close-btn")[0].focus();
	}
});


//show password
Array.from(getElementByClass("showhide-button")).forEach((item,i)=>{item.addEventListener("click",function(e){
 if(e.currentTarget.id==="enter-password"){
  if(enterPassword.childNodes[0].style.display==="block"){password.type="text";}
  else{password.type="password";}
 }
 else{
  if(re_Enter_Password.childNodes[0].style.display==="block"){reEnterPassword.type="text";}
  else{reEnterPassword.type="password";}
 }
});
});
//validation
function hasValidCharactersAndLength(input) {
    // Regular expression to match valid characters and length
    const regex = new RegExp("^[a-zA-Z0-9_-]{3,20}$");
    return regex.test(input);
}

function hasValidSpecialCharacters(input) {
	const regex = new RegExp("^[^~\"'<>|%^&*{}\\[\\]:;]*$");
	return regex.test(input);
}

sumbitBtn.addEventListener("click",function(e){
  submitBtnKey();
});
textField.forEach((item, i) => {
  item.addEventListener("input", function (e) {
    if (item.id === "username") {
      item.value = item.value.replace(/ /g, '');
      if (hasValidCharactersAndLength(item.value.trim())) {
        setborder([i, "1px solid #CFCFCF", "#666"]);
        username_errmsg.style.display = "none";
      } else {
        username_errmsg.style.display = "block";
      }
    } else if (item.id === "organization") {
      if (hasValidSpecialCharacters(item.value.trim())) {
        setborder([i, "1px solid #CFCFCF", "#666"]);
        organization_errmsg.style.display = "none";
      } else {
        organization_errmsg.style.display = "block";
      }
    } else {
      // Other fields
      if (item.value !== "" && item.id!=="username") {
        setborder([i, "1px solid #CFCFCF", "#666"]);
        //errortext[i].style.display = "none";
        if (item.type === "email" && validateEmail(item.value)) {
          invalidEmail[0].style.display = "none";
        }
 
        if (item.type === "email") {
          document.getElementsByClassName("emailalreadyexist")[0].style.display = "none";
        }
 
        if (item.id === "re-enter-password-field") {
          donotMatch.style.display = "none";
        }
 
        if (invalidEmail[0].style.display === "block") {
          setborder([1, "1px solid #DD1708", "#DD1708"]);
        }
      }
    }
  });
});
textField.forEach((item,i)=>{item.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    event.preventDefault();
	  submitBtnKey();
  }
  })
});
//submit
checked.addEventListener("click", function(event) {
 if(checked.checked){
   termsError.style.display="none";
   checked.classList.remove("check-error");
   document.styleSheets[3].cssRules[11].style.content='url("https://cdn.prod.website-files.com/65d2d5a795685961fec4d976/664d87be4d0cfb953b7deda3_tickicpon.svg")'
  }
 else{
   document.styleSheets[3].cssRules[11].style.content='';

 }
});
const submitBtnKey=async()=>{
 textField.forEach((item,i)=>{  
   if(item.value.trim()===""){
    setborder([i,"1px solid #DD1708","#DD1708"]);
    errortext[i].style.display="block";
   }
 });
  if(reEnterPassword.value.trim()&&password.value.trim()===reEnterPassword.value.trim()&& passwordValidationCount===4){
   errortext[5].style.display="none";
   donotMatch.style.display="none";
   errorFlag=false;
   setborder([5,"1px solid #cfcfcf","#666"]);
  }
 if(checked.checked){
   errorFlag=false;
 }
 if(!textField[0].value.trim()||!textField[1].value.trim()||!textField[2].value.trim()||!textField[3].value.trim()||!textField[4].value.trim()||!textField[5].value.trim()||!checked.checked){
   errorFlag=true;
   if(!reEnterPassword.value.trim().length){
    donotMatch.style.display="none";
   }
    if(!textField[1].value.trim()){
     invalidEmail[0].style.display="none";
    }
  }
  if(textField[1].value.trim()&&!validateEmail(textField[1].value.trim())){
   errorFlag=true;
   setborder([1,"1px solid #DD1708","#DD1708"]);
   invalidEmail[0].style.display="block";
  }
  if(document.getElementsByClassName("emailalreadyexist")[0].style.display==="block"){
   errorFlag=true;
   setborder([1,"1px solid #DD1708","#DD1708"]);
  }
  if(passwordValidationCount!==4){
   errorFlag=true;
  }
  if(reEnterPassword.value.trim()&&password.value.trim()!==reEnterPassword.value.trim()){
   errortext[5].style.display="none";
   donotMatch.style.display="block";
   errorFlag=true;
   setborder([5,"1px solid #DD1708","#DD1708"]);
  }
  if(!checked.checked){
   errorFlag=true;
   termsError.style.display="block";
   checked.classList.add("check-error");
  }
  if(!errorFlag){
  let org='';
  if(textField[2].getAttribute("val")) {
  org = selectedSlug;
  //org=textField[2].getAttribute("val").replace(/\s+/g, '-').toLowerCase();
  } else {
  org = textField[2].value.trim();
  }
API_Handler('/onboarding/user-signup', {}, "POST", {
  "fullName":textField[0].value.trim(),
  "username":textField[3].value.trim(),
  //textField[2].getAttribute("val")||textField[2].value.trim()
  "orgName":org,
  // "orgName":textField[2].value.trim().split(",")[0],

  "email":textField[1].value.trim(),
  "password":textField[4].value.trim(),
  "reEnterPassword":textField[5].value.trim()
 }).then((data) => {
  sumbitBtn.disabled = true;
  sumbitBtn.style.backgroundColor = "#abb2b9";
  window.location.href="sign-up-verification"
  
  }).catch((error) => {
    if (error.isValidError) {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    document.getElementById("error-message").textContent= error.message;
    document.getElementById("error-block").style.display="flex";
    document.getElementById("error-block").style.alignItems="center";
    }
  
  }) 
  }
}
const setborder=(prop)=>{
 fieldContainer[prop[0]].style.border=prop[1];
 fieldLabels[prop[0]].style.color=prop[2];
}
//password
password.addEventListener("input",function(e){
 passwordValidationCount=0;
 if(password.value.trim().length>9){
  setValidationColor(0,"#24802D","block","none","none");
  rules[0].ariaLabel="Requirement met: At least 10 characters"
 }
 else if(password.value.trim().length<10){
  setValidationColor(0,"#DD1708","none","none","block");
  rules[0].ariaLabel="Requirement not met: At least 10 characters"
 }


 if (uppercaseRegx.test(password.value.trim())) {
  setValidationColor(1,"#24802D","block","none","none");
  rules[1].ariaLabel="Requirement met: Uppercase character"
 } 
 else if(!uppercaseRegx.test(password.value.trim())) {
  setValidationColor(1,"#DD1708","none","none","block");
  rules[1].ariaLabel="Requirement not met: Uppercase character"
 }


 
 if (lowerCaseRegs.test(password.value.trim())) {
  setValidationColor(2,"#24802D","block","none","none");
  rules[2].ariaLabel="Requirement met: Lowercase character"
 } 
 else if(!lowerCaseRegs.test(password.value.trim())) {
  setValidationColor(2,"#DD1708","none","none","block");
  rules[2].ariaLabel="Requirement not met: Lowercase character"
 }



 if (special.test(password.value.trim())) {
  setValidationColor(3,"#24802D","block","none","none");
  rules[3].ariaLabel="Requirement met: One special character"
 } 
 else if(!special.test(password.value.trim())) {
  setValidationColor(3,"#DD1708","none","none","block");
  rules[3].ariaLabel="Requirement not met: One special character"
 }
 if (number.test(password.value.trim())) {
  setValidationColor(4,"#24802D","block","none","none");
  rules[4].ariaLabel="Requirement met: One number"
 }
 else if(!number.test(password.value.trim())) {
  setValidationColor(4,"#DD1708","none","none","block");
  rules[4].ariaLabel="Requirement not met: One number"
 }
 Array.from(right).forEach((item,i)=>{
  if(item.style.display==="block"&&passwordValidationCount<4){
   passwordValidationCount++;
  }if(password.value.trim().length===0){
   setValidationColor(i,"#666","none","block","none");
  }
 });
 if(passwordValidationCount===0){
  setPasswordValidation(["1px solid #C4C4C4","1px solid #C4C4C4","1px solid #C4C4C4","none","none","none",""]);
 }
 if(passwordValidationCount===1||(password.value.trim().length&&passwordValidationCount===0)){
  setPasswordValidation(["1px solid #DD1708","1px solid #C4C4C4","1px solid #C4C4C4","block","none","none","Password is weak"]);
 }
 if(passwordValidationCount>1&&passwordValidationCount<4){
  setPasswordValidation(["1px solid #AB5A05","1px solid #AB5A05","1px solid #C4C4C4","none","block","none","Password is medium"]);
 }
 if(passwordValidationCount===4){
  setPasswordValidation(["1px solid #24802D","1px solid #24802D","1px solid #24802D","none","none","block","Password is strong"]);
 }
});
password.addEventListener("focus",function(e){
 document.getElementById("indicator").style.display="flex";
 document.getElementById("password-rules").style.display="flex";});
const setValidationColor=(i,color,rightDisplay,idleDisplay,wrongDisplay)=>{
 validation[i].style.color=color;
 right[i].style.display=rightDisplay;
 idle[i].style.display=idleDisplay;
 wrong[i].style.display=wrongDisplay;	
}
const setPasswordValidation=(prop)=>{
 indicatorLeft.style.border=prop[0];
 indicatorMiddle.style.border=prop[1];
 indicatorRight.style.border=prop[2];  	
 weak.style.display=prop[3];
 medium.style.display=prop[4];
 strong.style.display=prop[5];
 indicatorcontainer.ariaLabel=prop[6];
}
//const validateEmail = (email) => {return String(email).toLowerCase().match(/^(([^<>()[\]\\.,;:\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,}))$/);};
const validateEmail = (email) => {return String(email).toLowerCase().match(/^(([^<>()[\]\\.,~`\"'<>|%^&*{};:\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,}))$/);};