var app = new Vue({
    el: "#app",
    data: {
        darkMode: false,
        userUsername: "Lvorex",
        userRank: { title: "Admin", color: "#F34240" },
        userIcon: "",
        searchValue: "",
        accountType: "",

        notifyMenu: false,
        newNotify: false,

        activeCategory: "all", // all login logout disconnect itemnmoney kill death doubleconnect warn kick adminjail ban

        allLogs: [
            { type: "status", message: "[26.07.2023 14:34] Lvorex filled the thirst." }
        ],
        categorizedLogs: [],
        toShowLogs: [
            { type: "status", message: "[26.07.2023 14:34] Lvorex filled the thirst." }
        ]
    },
    components : {
        "m-navbar": navbarComp,
        "left-navbar": leftNavbarComp
    },
    watch: {
        searchValue: function(newValue) {
            this.toShowLogs = this.categorizedLogs 
            this.toShowLogs = this.toShowLogs.filter(l => l.message.toLowerCase().includes(newValue))
        }
    },
    methods: {
        changeCategory: function(toCategory) {
            if (toCategory === "all") {
                this.toShowLogs = this.allLogs
                this.categorizedLogs = this.allLogs
            } else if (
                toCategory === "warn" ||
                toCategory === "adminjail" ||
                toCategory === "kick" ||
                toCategory === "ban" ||
                toCategory === "kill" ||
                toCategory === "death" ||
                toCategory === "disconnect" ||
                toCategory === "doubleconnect" ||
                toCategory === "login" ||
                toCategory === "logout"
            ) {
                this.toShowLogs = this.allLogs.filter(l => l.type === toCategory)
                this.categorizedLogs = this.toShowLogs
            } else if (toCategory === "itemnmoney") {
                this.toShowLogs = this.allLogs.filter(l => l.type === "money" || l.type === "item")
                this.categorizedLogs = this.toShowLogs
            }

            this.activeCategory = toCategory
        }
    },
    mounted: async function() {
        let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/controlKeyWithServer.lvorex`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                key: sha1(sessionStorage.getItem("uid-key"))
            })
        })

        result = await result.json()
        if (result.code === 404) {
            location.href = "/"
            return
        }

        const userDetails = JSON.parse(result.message)

        const userRankColors = {
            "Not Authorized": "#9e9e9e",
            Moderator: "#F34240",
            Admin: "#F34240",
            Owner: "#F34240",
        }

        this.darkMode = userDetails.darkMode === 1 ? true : false
        this.userUsername = userDetails.username
        this.userRank.title = userDetails.rank
        this.userRank.color = "#F34240"
        this.userIcon = userDetails.avatar
        this.accountType = userDetails.accountType

        result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getAllLogs.lvorex`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                key: sha1(sessionStorage.getItem("uid-key"))
            })
        })
        result = await result.json()
        if (result.code === 404) return console.log(result.message)
        this.allLogs = result.message.reverse()
        this.toShowLogs = this.allLogs

        document.getElementById("panel-content").style.backgroundImage = `url(../../img/panel${this.darkMode === true ? "Dark" : "Light"}ModeLogs.png)`
        document.getElementById("loading-container").style.opacity = 0
    }
})