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

        notifyMenu: false,
        newNotify: false,

        activeCategory: "all", // all, banned, blacklisted
        inCharacters: false,
        blacklistPopup: false,

        blacklistAddition: {
            name: "",
            license: ""
        },

        allAccounts: [
            { name: "Lvorex", icon: "", license: "license:4123102312949213", characterCount: 1, joinDate: "16.06.2023", playTime: "250h 38mn", status: "Offline", currentCharacter: "Lvorex Lvorex", lastOnline: "16.06.2023" }
        ],
        bannedAccounts: [],
        blacklistedAccounts: [
            { name: "Lvorex", icon: "", license: "license:4123102312949213", characterCount: 1, joinDate: "16.06.2023", playTime: "250h 38mn", status: "Offline", currentCharacter: "Lvorex Lvorex", lastOnline: "16.06.2023" }
        ],

        toShowAccounts: [
            { name: "Lvorex", icon: "", license: "license:4123102312949213", characterCount: 1, joinDate: "16.06.2023", playTime: "250h 38mn", status: "Offline", currentCharacter: "Lvorex Lvorex", lastOnline: "16.06.2023" },
        ]
    },
    components : {
        "m-navbar": navbarComp,
        "left-navbar": leftNavbarComp
    },
    methods: {
        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
            }
        },

        getBlacklistedAccounts: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getBlacklistedAccounts.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.blacklistedAccounts = result.message
        },

        changeCategory: async function(changeto) {
            if (changeto === "blacklisted") { await this.getBlacklistedAccounts() }
            this.activeCategory = changeto
            this.toShowAccounts = this[changeto+"Accounts"]
        },

        addBlacklist: async function() {
            if (this.userPermissions["Accounts"][2] === false) {
                await this.sendNotification("Your rank is not enough.", "System", true)
                return
            }

            if (
                this.blacklistAddition.name === "" ||
                this.blacklistAddition.license === ""
            ) return

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

            this.blacklistPopup = false
            this.blacklistedAccounts.push({
                name: this.blacklistAddition.name,
                license: this.blacklistAddition.license
            })

            await this.sendNotification("An account has been added to Blacklist", this.userRank.title+" "+this.userUsername, false)
        },

        unBlacklist: async function(license) {
            if (this.userPermissions["Accounts"][2] === false) {
                this.newNotify = {
                    desc: "Your rank is not enough.",
                    author: "System"
                }
                return
            }

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

            const index = this.blacklistedAccounts.findIndex(account => account.license === license)
            this.blacklistedAccounts.splice(index, 1)
        },

        toggleBlacklistPopup: function() {
            this.blacklistPopup = !this.blacklistPopup
        },

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

            const index = this.bannedAccounts.findIndex(w => w.license === license)
            this.bannedAccounts[index].banned = false
            this.allAccounts.push(this.bannedAccounts[index])
            this.bannedAccounts.splice(index, 1)
        },

        inspectAccount: async function(license, owner, icon) {
            if (this.userPermissions["Accounts"][1] === false) {
                this.newNotify = {
                    desc: "Your rank is not enough.",
                    author: "System"
                }
                return
            } 

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

            this.inCharacters = {
                owner: owner,
                icon: icon,
                characters: result.message
            }
            this.toShowAccounts = this.inCharacters.characters
        },

        inspectCharacter: async function(uid) {
            location.href = `${location.protocol}//${location.hostname}:${location.port}/Panel/Players/Info/#uid=${uid}`
        },

        copyToClipboard: function(text, event) {
            event.stopPropagation()
            event.target.src = "img/PlayerTikIcon.png"
            event.target.style.pointerEvents = "none"

            navigator.clipboard.writeText(text)
            setTimeout(() => {
                event.target.src = "img/ExportIconImg.png"
                event.target.style.pointerEvents = ""
            }, 2000)
        }
    },
    watch: {
        searchValue: function(newValue) {
            this.toShowAccounts = this[this.activeCategory+"Accounts"]
            this.toShowAccounts = this.toShowAccounts.filter(
                account => 
                account.name.toLowerCase().startsWith(newValue.toLowerCase()) ||
                account.license === newValue
            )
        }
    },
    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
        this.userPermissions = userDetails.permissions

        result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getAccounts.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("ERROR")
        this.allAccounts = result.message.filter(account => account.banned === false)
        this.bannedAccounts = result.message.filter(account => account.banned === true)
        this.toShowAccounts = this.allAccounts

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