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

        notifyMenu: false,
        newNotify: false,
        ScriptPatches: {},
    },
    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: {
        useDiscordAvatar: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/useDiscordAvatar.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ key: sha1(sessionStorage.getItem("uid-key")) })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.newNotify = {
                    desc: result.message,
                    author: "System"
                }
                return
            }

            this.userIcon = result.message
            this.newNotify = {
                desc: "Your avatar successfully updated ",
                author: "System"
            }
        },

        showHiddenPassword: function(e) {
            const inputElement = e.target.parentElement.getElementsByTagName("input")[0]
            if (inputElement.type === "text") {
                inputElement.type = "password"
            } else {
                inputElement.type = "text"
            }
        },

        changeUserCredentials: async function(type, newValue) {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeUserCredentials.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ 
                    key: sha1(sessionStorage.getItem("uid-key")),
                    type: type,
                    newValue: newValue
                })
            })
            result = await result.json()
            this.newNotify = {
                desc: result.message,
                author: "System"
            }
            if (result.code !== 200) return

            if (type === "username") { this.userUsername = newValue }
            if (type === "picture") { this.userIcon = newValue }
        },

        changeDarkMode: async function(toggle) {
            this.darkMode = toggle
            const newMode = toggle === false ? 0 : 1

            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/toggleDarkMode.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ key: sha1(sessionStorage.getItem("uid-key")), newMode: newMode })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.newNotify = {
                    desc: result.message,
                    author: "System"
                }
                return
            }

            this.refreshDarkMode()
        },

        toggleSyncMode: async function(toggle) {
            const newMode = toggle === true ? 1 : 0

            let newDarkMode = false
            if (Number(moment(Date.now()).format("HH")) >= 18) {
                newDarkMode = true
            }
            this.darkMode = newDarkMode

            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/toggleSyncMode.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ key: sha1(sessionStorage.getItem("uid-key")), newMode: newMode })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.newNotify = {
                    desc: result.message,
                    author: "System"
                }
                return
            }

            this.refreshDarkMode()
        },

        refreshDarkMode: function() {
            document.getElementById("panel-content").style.backgroundImage = `url(../../img/panel${this.darkMode === true ? "Dark" : "Light"}ModeSettings.png)`
        },

        sendNotification: async function(desc, author, self) {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/sendNotification.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    desc: desc,
                    author: author,
                    self: self
                })
            })
            result = await result.json()
            if (result.code !== 200) return
            this.newNotify = {
                desc: desc,
                author: author
            }
        },
    },
    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)

        this.darkMode = userDetails.darkMode === 1 ? true : false
        this.syncedDarkMode = userDetails.syncedDarkMode === 1 ? true : false
        this.userUsername = userDetails.username
        this.userRank.title = userDetails.rank
        this.userRank.color = "#F34240"
        this.userIcon = userDetails.avatar
        this.accountType = userDetails.accountType
        
        if (this.userRank.title === "Not Authorized") {
            this.sendNotification("Your permission is not setted, please say owner to set your permission from 'Management' page.", "System", true)
        }

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

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