function updateSettingsPage(){

    let themesEl = $(".pageSettings .section.themes .buttons").empty();
    themesList.forEach(theme => {
        themesEl.append(`<div class="theme button" theme='${theme.name}' style="color:${theme.textColor};background:${theme.bgColor}">${theme.name.replace('_', ' ')}</div>`); 
    })

    let langEl = $(".pageSettings .section.languages .buttons").empty();
    Object.keys(words).forEach(language => {
        if(language === "english_10k") return;
        langEl.append(`<div class="language button" language='${language}'>${language.replace('_', ' ')}</div>`);
        if(language === "english_expanded"){
            langEl.append(`<div class="language button" language='english_10k'>english 10k</div>`);
        }  
    })

    let layoutEl = $(".pageSettings .section.layouts .buttons").empty();
    Object.keys(layouts).forEach(layout => {
        layoutEl.append(`<div class="layout button" layout='${layout}'>${layout.replace('_', ' ')}</div>`);
    });

    refreshTagsSettingsSection();
    

    setSettingsButton('smoothCaret', config.smoothCaret);
    setSettingsButton('quickTab', config.quickTab);
    setSettingsButton('liveWpm', config.showLiveWpm);
    setSettingsButton('timerBar', config.showTimerBar)
    setSettingsButton('keyTips', config.showKeyTips);
    setSettingsButton('freedomMode', config.freedomMode);
    setSettingsButton('blindMode', config.blindMode);
    setSettingsButton('quickEnd', config.quickEnd);
    setSettingsButton('flipTestColors', config.flipTestColors);
    setSettingsButton('discordDot', config.showDiscordDot);
    setSettingsButton('colorfulMode', config.colorfulMode);
    setSettingsButton('maxConfidence', config.maxConfidence);

    setActiveThemeButton();
    setActiveLanguageButton();
    setActiveLayoutButton();
    setActiveFontSizeButton();
    setActiveDifficultyButton();
    setActiveCaretStyleButton();
    setActiveTimerStyleButton();
    setActiveThemeTab();	
    setCustomThemeInputs();


    if (config.showKeyTips) {
        $(".pageSettings .tip").removeClass('hidden');
    } else {
        $(".pageSettings .tip").addClass('hidden');
    }


}

function refreshTagsSettingsSection(){
    if(firebase.auth().currentUser !== null && dbSnapshot !== null){
        let tagsEl = $(".pageSettings .section.tags .tagsList").empty();
        dbSnapshot.tags.forEach(tag => {
            if(tag.active === true){
                tagsEl.append(`
            
                <div class="tag" id="${tag.id}">
                    <div class="active" active="true">
                        <i class="fas fa-check-square"></i>
                    </div>
                    <div class="title">${tag.name}</div>
                    <div class="editButton"><i class="fas fa-pen"></i></div>
                    <div class="removeButton"><i class="fas fa-trash"></i></div>
                </div>
            
            `);
            }else{
                tagsEl.append(`
            
                <div class="tag" id="${tag.id}">
                    <div class="active" active="false">
                        <i class="fas fa-square"></i>
                    </div>
                    <div class="title">${tag.name}</div>
                    <div class="editButton"><i class="fas fa-pen"></i></div>
                    <div class="removeButton"><i class="fas fa-trash"></i></div>
                </div>
            
            `);
            }
            
        });
        $(".pageSettings .section.tags").removeClass('hidden');
    }else{
        $(".pageSettings .section.tags").addClass('hidden');
    }
}

function setActiveThemeButton() {
    $(`.pageSettings .section.themes .theme`).removeClass('active');
    $(`.pageSettings .section.themes .theme[theme=${config.theme}]`).addClass('active');
}

function setActiveThemeTab() {
    config.customTheme === true ? $("[tab='custom']").click() : $("[tab='preset']").click()
}

function setCustomThemeInputs() {
    $("[type=color]").each((n, index) => {
        let currentColor = config.customThemeColors[colorVars.indexOf($(index).attr("id"))]
        $(index).val(currentColor)
        $(index).prev().text(currentColor)
    })
}

function setActiveLayoutButton(){
    $(`.pageSettings .section.layouts .layout`).removeClass('active');
    $(`.pageSettings .section.layouts .layout[layout=${config.layout}]`).addClass('active');
}

function setActiveFontSizeButton() {
    $(`.pageSettings .section.fontSize .buttons .button`).removeClass('active');
    $(`.pageSettings .section.fontSize .buttons .button[fontsize=`+config.fontSize+`]`).addClass('active');
}

function setActiveDifficultyButton() {
    $(`.pageSettings .section.difficulty .buttons .button`).removeClass('active');
    $(`.pageSettings .section.difficulty .buttons .button[difficulty=`+config.difficulty+`]`).addClass('active');
}

function setActiveLanguageButton() {
    $(`.pageSettings .section.languages .language`).removeClass('active');
    $(`.pageSettings .section.languages .language[language=${config.language}]`).addClass('active'); 
}

function setActiveCaretStyleButton() {
    $(`.pageSettings .section.caretStyle .buttons .button`).removeClass('active');
    $(`.pageSettings .section.caretStyle .buttons .button[caret=`+config.caretStyle+`]`).addClass('active');
}

function setActiveTimerStyleButton() {
    $(`.pageSettings .section.timerStyle .buttons .button`).removeClass('active');
    $(`.pageSettings .section.timerStyle .buttons .button[timer=`+config.timerStyle+`]`).addClass('active');
}

function setSettingsButton(buttonSection,tf) {
    if (tf) {
        $(".pageSettings .section."+buttonSection+" .buttons .button.on").addClass('active');
        $(".pageSettings .section."+buttonSection+" .buttons .button.off").removeClass('active');
    } else {
        $(".pageSettings .section."+buttonSection+" .buttons .button.off").addClass('active');
        $(".pageSettings .section."+buttonSection+" .buttons .button.on").removeClass('active');
    }
}

function showActiveTags(){
    // activeTags = [];
    // tagsString = "";
    // $.each($('.pageSettings .section.tags .tagsList .tag'), (index, tag) => {
    //     if($(tag).children('.active').attr('active') === 'true'){
    //         activeTags.push($(tag).attr('id'));
    //         tagsString += $(tag).children('.title').text() + ', ';
    //     }
    // })
    // updateTestModesNotice();


    // if($(target).attr('active') === 'true'){
    //     $(target).attr('active','false');
    //     $(target).html('<i class="fas fa-square"></i>')
    // }else{
    //     $(target).attr('active','true');
    //     $(target).html('<i class="fas fa-check-square"></i>')
    // }


    // $.each($('.pageSettings .section.tags .tagsList .tag'), (index, tag) => {
    //     let tagid = $(tag).attr('')
    // })

    dbSnapshot.tags.forEach(tag => {
        if(tag.active === true){
            $(`.pageSettings .section.tags .tagsList .tag[id='${tag.id}'] .active`).html('<i class="fas fa-check-square"></i>');
        }else{
            $(`.pageSettings .section.tags .tagsList .tag[id='${tag.id}'] .active`).html('<i class="fas fa-square"></i>');
        }
    })


}

function toggleTag(tagid, nosave = false){
    dbSnapshot.tags.forEach(tag => {
        if(tag.id === tagid){
            if(tag.active === undefined){
                tag.active = true;
            }else{
                tag.active = !tag.active;
            }
        }
    })
    updateTestModesNotice();
    if(!nosave) saveActiveTagsToCookie();
}

//smooth caret
$(".pageSettings .section.smoothCaret .buttons .button.on").click(e => {
    setSmoothCaret(true);
    // showNotification('Smooth caret on', 1000);
    setSettingsButton('smoothCaret', config.smoothCaret);
})
$(".pageSettings .section.smoothCaret .buttons .button.off").click(e => {
    setSmoothCaret(false);
    // showNotification('Smooth caret off', 1000);
    setSettingsButton('smoothCaret', config.smoothCaret);
})

//quick tab
$(".pageSettings .section.quickTab .buttons .button.on").click(e => {
    setQuickTabMode(true);
    // showNotification('Quick tab on', 1000);
    setSettingsButton('quickTab', config.quickTab);
})
$(".pageSettings .section.quickTab .buttons .button.off").click(e => {
    setQuickTabMode(false);
    // showNotification('Quick tab off', 1000);
    setSettingsButton('quickTab', config.quickTab);
})

//live wpm
$(".pageSettings .section.liveWpm .buttons .button.on").click(e => {
    config.showLiveWpm = true;
    saveConfigToCookie();
    // showNotification('Live WPM on', 1000);
    setSettingsButton('liveWpm', config.showLiveWpm);
})
$(".pageSettings .section.liveWpm .buttons .button.off").click(e => {
    config.showLiveWpm = false;
    saveConfigToCookie();
    // showNotification('Live WPM off', 1000);
    setSettingsButton('liveWpm', config.showLiveWpm);
})

//timer bar
$(".pageSettings .section.timerBar .buttons .button.on").click(e => {
    config.showTimerBar = true;
    saveConfigToCookie();
    // showNotification('Timer bar on', 1000);
    setSettingsButton('timerBar', config.showTimerBar);
})
$(".pageSettings .section.timerBar .buttons .button.off").click(e => {
    config.showTimerBar = false;
    saveConfigToCookie();
    // showNotification('Timer bar off', 1000);
    setSettingsButton('timerBar', config.showTimerBar);
})

//freedom mode
$(".pageSettings .section.freedomMode .buttons .button.on").click(e => {
    setFreedomMode(true);
    saveConfigToCookie();
    // showNotification('Freedom mode on', 1000);
    setSettingsButton('freedomMode', config.freedomMode);
    setSettingsButton('maxConfidence', config.maxConfidence);
})
$(".pageSettings .section.freedomMode .buttons .button.off").click(e => {
    setFreedomMode(false);
    saveConfigToCookie();
    // showNotification('Freedom mode off', 1000);
    setSettingsButton('freedomMode', config.freedomMode);
    setSettingsButton('maxConfidence', config.maxConfidence);
})

//max confidence
$(".pageSettings .section.maxConfidence .buttons .button.on").click(e => {
    setMaxConfidence(true);
    saveConfigToCookie();
    // showNotification('Max confidence on', 1000);
    setSettingsButton('freedomMode', config.freedomMode);
    setSettingsButton('maxConfidence', config.maxConfidence);
})
$(".pageSettings .section.maxConfidence .buttons .button.off").click(e => {
    setMaxConfidence(false);
    saveConfigToCookie();
    // showNotification('Max confidence off', 1000);
    setSettingsButton('freedomMode', config.freedomMode);
    setSettingsButton('maxConfidence', config.maxConfidence);
})

//keytips
$(".pageSettings .section.keyTips .buttons .button.on").click(e => {
    setKeyTips(true);
    // showNotification('Key tips on', 1000);
    setSettingsButton('keyTips', config.showKeyTips);
    if (config.showKeyTips) {
        $(".pageSettings .tip").removeClass('hidden');
    } else {
        $(".pageSettings .tip").addClass('hidden');
    }
})
$(".pageSettings .section.keyTips .buttons .button.off").click(e => {
    setKeyTips(false);
    // showNotification('Key tips off', 1000);
    setSettingsButton('keyTips', config.showKeyTips);
    if (config.showKeyTips) {
        $(".pageSettings .tip").removeClass('hidden');
    } else {
        $(".pageSettings .tip").addClass('hidden');
    }
})

//keytips
$(".pageSettings .section.discordDot .buttons .button.on").click(e => {
    setDiscordDot(true);
    setSettingsButton('discordDot', config.showDiscordDot);
})
$(".pageSettings .section.discordDot .buttons .button.off").click(e => {
    setDiscordDot(false);
    setSettingsButton('discordDot', config.showDiscordDot);
})

//themes
// $(document).on("mouseover",".pageSettings .section.themes .theme", (e) => {
//     let theme = $(e.currentTarget).attr('theme');
//     previewTheme(theme);
// })

$(document).on("click",".pageSettings .section.themes .theme", (e) => {
    let theme = $(e.currentTarget).attr('theme');
    setTheme(theme);
    setActiveThemeButton();
})

// $(document).on("mouseleave",".pageSettings .section.themes", (e) => {
//     setTheme(config.theme);
// })

//languages
$(document).on("click",".pageSettings .section.languages .language", (e) => {
    let language = $(e.currentTarget).attr('language');
    changeLanguage(language);
    // showNotification('Language changed', 1000);
    restartTest();
    setActiveLanguageButton();
})

//layouts
$(document).on("click",".pageSettings .section.layouts .layout", (e) => {
    console.log("clicked")
    let layout = $(e.currentTarget).attr('layout');
    changeLayout(layout);
    // showNotification('Layout changed', 1000);
    restartTest();
    setActiveLayoutButton();
})

//fontsize
$(document).on("click",".pageSettings .section.fontSize .button", (e) => {
    let fontSize = $(e.currentTarget).attr('fontsize');
    changeFontSize(fontSize);
    // showNotification('Font size changed', 1000);
    setActiveFontSizeButton();
})

//difficulty
$(document).on("click",".pageSettings .section.difficulty .button", (e) => {
    let difficulty = $(e.currentTarget).attr('difficulty');
    setDifficulty(difficulty);
    // showNotification('Difficulty changed', 1000);
    setActiveDifficultyButton();
})

//caret style
$(document).on("click",".pageSettings .section.caretStyle .button", (e) => {
    let caretStyle = $(e.currentTarget).attr('caret');
    setCaretStyle(caretStyle);
    // showNotification('Caret style updated', 1000);
    setActiveCaretStyleButton();
})

//timer style
$(document).on("click",".pageSettings .section.timerStyle .button", (e) => {
    let timerStyle = $(e.currentTarget).attr('timer');
    setTimerStyle(timerStyle);
    // showNotification('Timer style updated', 1000);
    setActiveTimerStyleButton();
})


//blind mode
$(".pageSettings .section.blindMode .buttons .button.on").click(e => {
    setBlindMode(true);
    // showNotification('Blind mode on', 1000);
    setSettingsButton('blindMode', config.blindMode);
})
$(".pageSettings .section.blindMode .buttons .button.off").click(e => {
    setBlindMode(false);
    // showNotification('Blind mode off', 1000);
    setSettingsButton('blindMode', config.blindMode);
})

//blind mode
$(".pageSettings .section.quickEnd .buttons .button.on").click(e => {
    setQuickEnd(true);
    // showNotification('Quick end on', 1000);
    setSettingsButton('quickEnd', config.quickEnd);
})
$(".pageSettings .section.quickEnd .buttons .button.off").click(e => {
    setQuickEnd(false);
    // showNotification('Quick end off', 1000);
    setSettingsButton('quickEnd', config.quickEnd);
})

//flip test
$(".pageSettings .section.flipTestColors .buttons .button.on").click(e => {
    setFlipTestColors(true);
    // showNotification('Flip test colors on', 1000);
    setSettingsButton('flipTestColors', config.flipTestColors);
})
$(".pageSettings .section.flipTestColors .buttons .button.off").click(e => {
    setFlipTestColors(false);
    // showNotification('Flip test colors off', 1000);
    setSettingsButton('flipTestColors', config.flipTestColors);
})

//extra color
$(".pageSettings .section.colorfulMode .buttons .button.on").click(e => {
    setColorfulMode(true);
    // showNotification('Colorful mode on', 1000);
    setSettingsButton('colorfulMode', config.colorfulMode);
})
$(".pageSettings .section.colorfulMode .buttons .button.off").click(e => {
    setColorfulMode(false);
    // showNotification('Colorful mode off', 1000);
    setSettingsButton('colorfulMode', config.colorfulMode);
})

//tags
$(document).on("click",".pageSettings .section.tags .tagsList .tag .active",e => {
    let target = e.currentTarget;
    let tagid = $(target).parent('.tag').attr('id');
    // if($(target).attr('active') === 'true'){
    //     $(target).attr('active','false');
    //     $(target).html('<i class="fas fa-square"></i>')
    // }else{
    //     $(target).attr('active','true');
    //     $(target).html('<i class="fas fa-check-square"></i>')
    // }
    toggleTag(tagid);
    showActiveTags();
})

$(document).on("click",".pageSettings .section.tags .addTagButton",e => {
    showEditTags('add');
})

$(document).on("click",".pageSettings .section.tags .tagsList .tag .editButton",e => {
    let tagid = $(e.currentTarget).parent('.tag').attr('id');
    let name = $(e.currentTarget).siblings('.title').text();
    showEditTags('edit',tagid,name);
})

$(document).on("click",".pageSettings .section.tags .tagsList .tag .removeButton",e => {
    let tagid = $(e.currentTarget).parent('.tag').attr('id');
    let name = $(e.currentTarget).siblings('.title').text();
    showEditTags('remove',tagid,name);
})

//theme tabs & custom theme
const colorVars = ['--bg-color', '--main-color','--caret-color', '--sub-color', '--text-color', '--error-color', '--error-extra-color', '--extra-error-color', '--extra-error-extra-color']

$(".tab").click(e => {
    $('.tab').removeClass("active")
    var $target = $(e.currentTarget)
        $target.addClass("active")
    
        if($target.attr("tab") == "preset") {
            setCustomTheme(false)
            $('[tabContent="custom"]').removeClass("reveal")
            $('[tabContent="preset"]').addClass("reveal")

            // setTimeout(() => {
            // }, 0);
        } else {
            setCustomTheme(true)
            $('[tabContent="preset"]').removeClass("reveal")
            $('[tabContent="custom"]').addClass("reveal")

            // setTimeout(() => {
            // }, 0);
        }
})

$("[type='color']").on('input', e => {
    let $colorVar = $(e.currentTarget).attr('id')
    let $pickedColor = $(e.currentTarget).val();

    document.documentElement.style.setProperty($colorVar, $pickedColor)
    $("[for="+$colorVar+"]").text($pickedColor)

    config.customThemeColors[colorVars.indexOf($colorVar)] = $pickedColor
})

$('.colorPicker').on('change', e => {
    setCustomTheme(true) // Save a color once picked
})