//menu login
const loginBtn = document.getElementById('loginBtn');
const userBtn = document.getElementById('userBtn');

//login html elements
const logPh = 'loginPH.php';
const login = document.getElementById('login');
const formLog = document.getElementById('formLog');
const infoParag = document.getElementById('connInfo');
const userName = document.getElementById('userName');
const userPass = document.getElementById('userPass');
const loginDiv = document.getElementById('loginDiv');
const jumboRegister = document.getElementById('jumboRegister');

//logout html elements
const logoutDiv = document.getElementById('logoutDiv');
const logoutLabel = document.getElementById('logoutLabel');
const logoutBtn = document.getElementById('logoutBtn');

//reset & change pass elements
const resChanPassDiv = document.getElementById('resChanPass');
const resetPassBtn = document.getElementById('resetPassBtn');
const changePassBtn = document.getElementById('changePassBtn');
const resetPassParag  = document.getElementById('resetPassParag');

resetPassBtn.onclick = function() {
    //resetPassParag.textContent = "Please insert your username";
    const usernameVal = userName.value;
    const resetPhURL = "resetPass.php";

    if(usernameVal.length < 1) {
        resetPassParag.textContent = "Please type your username";
    } else {
        let resForm = new FormData();
        resForm.append('userName', usernameVal);

        async function resetPass(resetForm) {
            const response = await fetch(resetPhURL, {
                method: 'POST',
                body: resetForm
            });
            
            const phResp = await response.text();
            if (phResp == "noUser") {
                resetPassParag.textContent = "Username incorrect";
            } else {
                resetPassParag.textContent = phResp;
            }
        }

        resetPass(resForm);


    }

};

logoutBtn.onclick = function() {
    loginDiv.style.display = "block";
    resChanPassDiv.style.display = "block";
    localStorage.removeItem('smartCamUser');
    localStorage.removeItem('smartCamPass');
    logoutDiv.style.display = "none";
    loginBtn.textContent = "Login/Register";
    userBtn.style.display = "none";
    jumboRegister.style.display = "block";
};

formLog.addEventListener('submit', function(event) {
    event.preventDefault();
    const formData = new FormData(formLog);
    logger(formData);
});

async function logger(formData) {
    const response = await fetch (logPh, 
        {
            method: 'POST',
            body: formData
        });
    const phpResponse = await response.text();
    

    if (phpResponse.includes("conFail")) {
        infoParag.style.display = "block";
        infoParag.textContent = "Password or username incorrect";
    } else if (phpResponse.includes("conOK")) {
        infoParag.textContent = "";
        infoParag.style.display = "none";
        logoutDiv.style.display = "block";
        logoutLabel.textContent = "You're logged as " + userName.value + ". You will be redirected to Dashboard in 5 seconds!";
        loginDiv.style.display = "none";
        resChanPassDiv.style.display = "none";
        userBtn.style.display = "block";
        userBtn.textContent = userName.value;
        jumboRegister.style.display = "none";
        loginBtn.textContent = "Logout";
        localStorage.setItem('smartCamUser', userName.value);
        localStorage.setItem('smartCamPass', userPass.value);
        dashSaveAndGo();
    }
}



//testParag.textContent = "up until visible function";
function visibilityCheck() {
    let usernameCK = localStorage.getItem('smartCamUser');
    let userPassCK = localStorage.getItem('smartCamPass');
    if (usernameCK != null && userPassCK != null) {
        
        loginDiv.style.display = "none";
        resChanPassDiv.style.display = "none";
        logoutDiv.style.display = "block";
        logoutLabel.textContent = "You're logged as " + usernameCK;
        loginBtn.textContent = "Logout";
        userBtn.style.display = "block";
        userBtn.textContent = usernameCK;
        jumboRegister.style.display = "none";
    } else {
        loginDiv.style.display = "block";
        resChanPassDiv.style.display = "block";
        logoutDiv.style.display = "none";
        userBtn.style.display = "none";
    }
    
   
}

visibilityCheck();

function dashSaveAndGo() {
    setTimeout(function(){window.location.href = "../userBoard/mainDashboard.html";}, 5000);
  }