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,

        // Popups
        takeAdminPopup: false,
        newAdminPopup: false,
        // Popups

        activeCategory: "all", // all, online, offline

        allAdmins: [
            { name: "Lvorex", icon: "", license: "license:4123102312949213", characterCount: 1, joinDate: "16.06.2023", playTime: "250h 38mn", status: "Offline", currentCharacter: "Lvorex Lvorex", lastOnline: "16.06.2023" }
        ],
        onlineAdmins: [],
        offlineAdmins: [],
        toShowAdmins: [
            { 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: {
        getCharacters: async function() {
            result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getCharacters.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    page: "Admins"
                })
            })
            result = await result.json()
            if (result.code !== 200) return console.log("ERROR")
            this.allAdmins = JSON.parse(result.message).players.filter(p => p.admin !== 0).map(p => {
                return { ...p,
                    inGameName: JSON.parse(result.message).identifier === "citizenid" ? `${JSON.parse(p.charinfo).firstname} ${JSON.parse(p.charinfo).lastname}` : `${p.firstname} ${p.lastname}`,
                    grade: JSON.parse(result.message).identifier === "citizenid" ? JSON.parse(p.job).label + " - " + JSON.parse(p.job).grade.name : p.job + " - " + p.job_grade
                }
            })
            this.onlineAdmins = this.allAdmins.filter(p => p.playerStatus === 'Online')
            this.offlineAdmins = this.allAdmins.filter(p => p.playerStatus === 'Offline')
            this.toShowAdmins = this.allAdmins
        },

        changeCategory: async function(changeto) {
            this.activeCategory = changeto
            this.toShowAdmins = this[changeto+"Admins"]
        },

        togglePopup: function(type, index) {
            if (type === "takeAdmin") {
                const ClickedAdmin = this.allAdmins[index]
                this.takeAdminPopup = {
                    name: ClickedAdmin.inGameName,
                    rank: ClickedAdmin.admin === 1 ? 'Server Admin' : ClickedAdmin.admin,
                    icon: ClickedAdmin.playerAvatar,
                    index: index
                }
            } else if (type === "newAdmin") {
                this.newAdminPopup = {
                    playerId: "",
                    perm: ""
                }
            }
        },

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

            const ClickedAdmin = this.allAdmins[index]
            if (ClickedAdmin.cfgAdmin === 1) {
                this.newNotify = {
                    desc: "You can't take perms an admin that authorized at server.cfg file.",
                    author: "System"
                }
                this.takeAdminPopup = false
                return
            }

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

            this.allAdmins.splice(index, 1)
            this.takeAdminPopup = false
        },

        setNewAdmin: async function(playerId, perm) {
            if (this.userPermissions["Admins"][1] === false) {
                this.newNotify = {
                    desc: "Your rank is not enough.",
                    author: "System"
                }
                return
            }

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

            await this.getCharacters()
            this.newAdminPopup = false
        }
    },
    watch: {
        searchValue: function(newValue) {
            this.toShowAdmins = this[this.activeCategory+"Admins"]
            this.toShowAdmins = this.toShowAdmins.filter(
                account => 
                account.name.toLowerCase().startsWith(newValue.toLowerCase()) ||
                String(account.admin).toLowerCase().includes(newValue.toLowerCase())
            )
        }
    },
    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.userUsername = userDetails.username
        this.userRank.title = userDetails.rank
        this.userRank.color = "#F34240"
        this.userIcon = userDetails.avatar
        this.accountType = userDetails.accountType
        this.userPermissions = userDetails.permissions

        await this.getCharacters()

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