let storage = window.localStorage

function showPasswordPopup(){
        
    let popup = new PopupBuilder()
    .add(new PopupText("Change Password").setStyle("font-size: 20px; font-weight: bold; margin-bottom: 10px;"))
    if (hasPassword){
        popup.add(new PopupTextInput("", "Old Password", "old-password", is_hidden=true))
    }
    popup.add(new PopupTextInput("", "New Password", "new-password", is_hidden=true))
    .add(new PopupTextInput("", "Repeat New Password", "new-password-2", is_hidden=true))
    .add(new PopupHStack().add(new PopupDismissButton("Cancel"))
        .add(new PopupButton("Change Password", function(){
            let new_password = popup.get_input_value("new-password")
            if (new_password != popup.get_input_value("new-password-2")){
                let popup2 = new PopupBuilder()
                    .add(new PopupText("Passwords do not match").setStyle("font-size: 20px; font-weight: bold; margin-bottom: 10px;"))
                    .add(new PopupDismissButton("Close"))
                popup2.show()
                return
            }
            fetch("/api/change_password", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    old_password: popup.get_input_value("old-password"),
                    new_password: new_password
                })
            }).then(function(response){
                if (response.status != 200){
                    console.log("Error changing password")
                }
                json = response.json()
                console.log(json)
            })
                
            let popup3 = new PopupBuilder()
                    .add(new PopupText("Password Changed Successfully").setStyle("font-size: 20px; font-weight: bold; margin-bottom: 10px;"))
                    .add(new PopupDismissButton("Close"))
                popup3.show()
            popup.close()

        }).setStyle("background-color:rgba(255,0,0,0.5); color:white;")))
    popup.show()
}

function loadSettingsData(){
    let shuffle = storage.getItem("shuffle-configuration")
    let animate = storage.getItem("animated-configuration")
    let train_data = storage.getItem("train-configuration")
    let mastery_data = storage.getItem("mastery-configuration")
    let mc_data = storage.getItem("multichoice-configuration")

    if (shuffle == null || shuffle == undefined || shuffle == 'false'){
        console.log("Shuffle is in default state")
    } else {
        document.getElementById("shuffle-switch").checked = true
    }

    if (animate == null || animate == undefined || animate == 'true'){
        console.log("animate is in default state")
        document.getElementById("animated-switch").checked = true
    } else {
        document.getElementById("animated-switch").checked = false
    }

    if (train_data == null || train_data == undefined){
        console.log("train data unchanged")
    } else {

    }

    if (mastery_data == null || mastery_data == undefined){
        console.log("mastery data unchanged")
    } else {
        
    }

    if (mc_data == null || mc_data == undefined){
        console.log("mc data unchanged")
    } else {
        
    }
}

loadSettingsData()


function fadeOutMode(){
    
}

function swap_animated(){
    let state = document.getElementById("animated-switch").checked
    if (state){
        console.log("setting animated to true")
        storage.setItem("animated-configuration", true)
        let container = document.getElementById("header-snowflake-container")
        for (var i = 0; i < 40; i++) {
            var snowflake = document.createElement("div");
            snowflake.classList.add("snowflake");
            container.appendChild(snowflake);
        }
    } else {
        console.log("setting animated to false")
        storage.setItem("animated-configuration", false)
        let snowflakes = document.querySelectorAll(".snowflake")
        snowflakes.forEach(function(elem){
            elem.remove()
        })
    }
}