var app = new Vue({
    el : "#app",
    data : {
        darkMode: false,
        accountType: "Roleplay",
        date: moment(Date.now()).format("MMMM M YYYY HH:mm"),

        VersionCheck: {
            CurrentVersion: "1.0",
            Outdated: "1.1" // false | 'version'
        },

        notifyMenu: false,
        newNotify: false,

        userUsername: "Lvorex",
        userRank: { title: "Admin", color: "#F34240" },
        userIcon: "",
        userPermissions: undefined,

        executeCommandInput: "",
        announcementInput: "",

        cpuUsage: 0,
        memUsage: 0,
        cpuMhz: 0,
        cpuCount: 0,
        totalMem: 0,
        freeMem: 0,

        playerCount: 0,
        onlinesScoreLast: false,
        peakCount: 0,

        announcementClicked: false,
        kickplayersClicked: false,

        inCategory: "Admins",
        inJob: "admin",

        jobs: {
            LSPD: { job: "police", icon: "img/policeIcon.png" },
            EMS: { job: "ems", icon: "img/emsIcon.png" },
            Mechanic: { job: "mechanic", icon: "img/mechanicIcon.png" },
            Unemployed: { job: "unemployed", icon: "" }
        },

        adminsCount: 0,
        policesCount: 0,
        medsCount: 0,
        mechanicsCount: 0,
        otherCount: 0,

        allOnlinePlayers: [],

        toShowPlayers: []
    },
    components : {
        "m-navbar": navbarComp,
        "left-navbar": leftNavbarComp
    },

    methods: {
        inspectPlayer: function(uid) {
            console.log("Test")
            location.href = "/Panel/Players/Info/#uid="+uid
        },

        changePlayerType: function(changeto, label) {
            this.inCategory = label
            this.toShowPlayers = this.allOnlinePlayers
            
            if (changeto === "admin") {
                this.toShowPlayers = this.allOnlinePlayers.filter(player => player.admin !== false)
            } else {
                this.toShowPlayers = this.allOnlinePlayers.filter(player => player.assignjob.includes(changeto))
            }

            this.inJob = changeto
        },

        executeCommand: async function() {
            const commandInput = document.getElementById("executeCommandInput")         
            commandInput.style.pointerEvents = "none"
            await fetch(`${location.protocol}//${location.hostname}:${location.port}/sendConsoleCommand.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    command: this.executeCommandInput
                })
            })

            commandInput.value = "Executed!"
            setTimeout(() => {
                commandInput.value = ""
                commandInput.style.pointerEvents = ""
            }, 1000)
        },

        changeControlsMode: async function(changeto) {
            if (changeto === "Announcement") {
                this.announcementClicked = true
                this.kickplayersClicked = false
            } else if (changeto === "KickPlayers") {
                this.kickplayersClicked = true
                this.announcementClicked = false
            } else {
                this.kickplayersClicked = false
                this.announcementClicked = false
            }
        },

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

            this.kickplayersClicked = false
            this.announcementClicked = false
            this.announcementInput = ""
        },

        kickAllPlayers: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/kickAllPlayers.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.kickplayersClicked = false
            this.announcementClicked = false
            this.refreshDatas()
        },

        refreshDatas: async function() {
            result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/machineCPUMemInfo.lvorex`)
            result = await result.json()

            this.date = moment(Date.now()).format("MMMM M YYYY HH:mm")
    
            this.cpuUsage = result.cpuUsage
            this.cpuMhz = result.cpuSpeed
            this.cpuCount = result.cpuCount
    
            this.totalMem = result.totalMem
            this.freeMem = result.freeMem
            this.memUsage = result.memUsage

            result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getOnlinePlayers.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.allOnlinePlayers = result.message
            if (this.inJob !== "admin") {
                this.toShowPlayers = this.allOnlinePlayers.filter(player => player.assignjob.includes(this.inJob))
            } else {
                this.toShowPlayers = this.allOnlinePlayers.filter(player => player.admin !== false)
            }
            this.playerCount = this.allOnlinePlayers.length
            this.peakCount = result.peakcount

            if (this.playerCount > 500) {
                this.onlinesScoreLast = true
            }
            
            this.adminsCount = this.allOnlinePlayers.filter(w => w.admin !== false).length
            this.policesCount = this.allOnlinePlayers.filter(w => w.assignjob.includes(this.jobs.LSPD.job)).length
            this.medsCount = this.allOnlinePlayers.filter(w => w.assignjob.includes(this.jobs.EMS.job)).length
            this.mechanicsCount = this.allOnlinePlayers.filter(w => w.assignjob.includes(this.jobs.Mechanic.job)).length
            this.otherCount = this.allOnlinePlayers.filter(w => w.assignjob.includes(this.jobs.Unemployed.job)).length

            app.$forceUpdate()
        }
    },

    mounted: async function() {
        if (!sessionStorage.getItem("uid-key")) {
            location.href = "/"
            return
        }

        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

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

        result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/machineCPUMemInfo.lvorex`)
        result = await result.json()

        this.cpuUsage = result.cpuUsage
        this.cpuMhz = result.cpuSpeed
        this.cpuCount = result.cpuCount

        this.totalMem = result.totalMem
        this.freeMem = result.freeMem
        this.memUsage = result.memUsage

        result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getOnlinePlayers.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.allOnlinePlayers = result.message

        this.toShowPlayers = this.allOnlinePlayers.filter(player => player.admin !== false)
        this.playerCount = this.allOnlinePlayers.length
        this.peakCount = result.peakcount
        this.adminsCount = this.allOnlinePlayers.filter(w => w.admin !== false).length
        this.policesCount = this.allOnlinePlayers.filter(w => w.assignjob.includes(this.jobs.LSPD.job)).length
        this.medsCount = this.allOnlinePlayers.filter(w => w.assignjob.includes(this.jobs.EMS.job)).length
        this.mechanicsCount = this.allOnlinePlayers.filter(w => w.assignjob.includes(this.jobs.Mechanic.job)).length
        this.otherCount = this.allOnlinePlayers.filter(w => w.assignjob.includes(this.jobs.Unemployed.job)).length

        if (this.playerCount > 500) {
            this.onlinesScoreLast = true
        }
        
        setInterval(this.refreshDatas, 20000)

        result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getMAdminVersion.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.VersionCheck = {
                CurrentVersion: "0.0",
                Outdated: false // false | 'version'
            }
        } else {
            this.VersionCheck = result.message
        }

        document.getElementById("loading-container").style.opacity = 0
    }
})