var app = new Vue({
    el : "#app",
    data: {
        darkMode: false,

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

        loadCount: 12,

        notifyMenu: false,
        newNotify: false,

        activeCategory: "all",
        searchValue: "",
        inDeletedCharacters: false,

        jobs: {
            LSPD: "police",
            EMS: "ems",
            Mechanic: "mechanic",
            Law: "law",
            Ballas: "ballas",
            TF: "tf",
            Vagos: "vagos",
            Unemployed: "unemployed"
        },

        allPlayers: [],
        categorizedPlayers: [],
        deletedPlayers: [],

        toShowPlayers: [],
        InfoGranted: true,
    },
    components : {
        "m-navbar": navbarComp,
        "left-navbar": leftNavbarComp
    },
    methods: {
        checkScroll() {
            let list = this.$refs.list;
            if (list.scrollTop + list.clientHeight >= list.scrollHeight) {
                this.loadMoreData();
            }
        },
    
        loadMoreData() {
            let nextData = this.categorizedPlayers.slice(this.toShowPlayers.length, this.toShowPlayers.length + this.loadCount);
            this.toShowPlayers = this.toShowPlayers.concat(nextData);
        },

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

            const index = this.deletedPlayers.findIndex(w => w.uid === playerUid)
            this.deletedPlayers[index].status = "Offline"
            this.allPlayers.push(this.deletedPlayers[index])
            this.deletedPlayers.splice(index, 1)
            
            this.categorizedPlayers = this.deletedPlayers
            this.toShowPlayers = this.categorizedPlayers.slice(0, this.loadCount)
        },

        changeCategory: async function(toCategory) {
            this.activeCategory = toCategory
            const toUseCategory = this[this.inDeletedCharacters === true ? 'deletedPlayers' : 'allPlayers']

            if (toCategory === "all") {
                this.categorizedPlayers = toUseCategory
                this.toShowPlayers = this.categorizedPlayers.slice(0, this.loadCount)
            } else if (toCategory === "admin") {
                this.categorizedPlayers = toUseCategory.filter(player => player.admin !== 0)
                this.toShowPlayers = this.categorizedPlayers.slice(0, this.loadCount)
            } else {
                this.categorizedPlayers = toUseCategory.filter(player => player.assignjob === toCategory)
                this.toShowPlayers = this.categorizedPlayers.slice(0, this.loadCount)
            }
        },

        changeDeletedCharacters: async function() {
            if (this.inDeletedCharacters) {
                this.inDeletedCharacters = false
                this.categorizedPlayers = this.allPlayers
                this.toShowPlayers = this.categorizedPlayers.slice(0, this.loadCount)
                this.activeCategory = "all"
            } else {
                this.inDeletedCharacters = true
                this.categorizedPlayers = this.deletedPlayers
                this.toShowPlayers = this.categorizedPlayers.slice(0, this.loadCount)
                this.activeCategory = "all"
            }
        },

        showInfoOfPlayer: function(playerId) {
            if (this.InfoGranted) {
                location.href = "/Panel/Players/Info/#uid="+playerId
            } else {
                this.newNotify = {
                    desc: "Your rank is not enough to see detailed info and actions.",
                    author: "System"
                }
            }
        }
    },
    watch: {
        searchValue: function(newValue) {
            const neededPlayers = []
            this.categorizedPlayers = this[this.activeCategory.toLowerCase()+'Players']
            this.categorizedPlayers.forEach(player => {
                if (player.name.toLowerCase().includes(newValue.toLowerCase())) {
                    neededPlayers.push(player)
                } else if (player.inGameName.toLowerCase().includes(newValue.toLowerCase())) {
                    neededPlayers.push(player)
                } else if (player.id.toLowerCase().includes(newValue.toLowerCase())) {
                    neededPlayers.push(player)
                }
            })

            this.categorizedPlayers = neededPlayers
            this.toShowPlayers = neededPlayers.slice(0, this.loadCount)
        }
    },
    mounted: async function() {
        document.getElementById("app").style.display = "none"

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

        let 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: "Players"
            })
        })
        result = await result.json()
        if (result.code === 404) {
            location.href = "/"
            return
        }

        const ResponseAllPlayers = JSON.parse(result.message).players
        this.allPlayers = ResponseAllPlayers

        const PlayerSorter = function(a,b) {
            if (a.id !== "-" && b.id === "-") {
                return -1
            } else if (a.id === "-" && b.id !== "-") {
                return 1
            } else {
                return 0
            }
        }

        this.allPlayers.sort(PlayerSorter)
        this.categorizedPlayers = this.allPlayers
        this.toShowPlayers = this.allPlayers.slice(0, this.loadCount)

        result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getDeletedCharacters.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)
        if (result.message.length !== 0) {
            JSON.parse(result.message).players.forEach(player => {
                let newUser = {}
                // { id: 1, inGameName: "Lvorex Lvorex", name: "Lvorex", job: "police", grade: "LSPD - Officer I", date: "14.06.2023", time: "260h 38mn", male: "Female", status: "Online", icon: "https://cdn.discordapp.com/icons/790686655430393868/a_3199ef6663eb0a46c022f8dc99584238?size=128", admin: 1 },
                newUser.id = player.playerId
                newUser.inGameName = JSON.parse(result.message).identifier === "citizenid" ? `${JSON.parse(player.charinfo).firstname} ${JSON.parse(player.charinfo).lastname}` : `${player.firstname} ${player.lastname}`
                newUser.name = JSON.parse(result.message).identifier === "citizenid" ? player.name : `${player.firstname} ${player.lastname}`
                newUser.job = JSON.parse(result.message).identifier === "citizenid" ? JSON.parse(player.job).name : player.job
                newUser.assignjob = player.assignjob
                newUser.grade =  JSON.parse(result.message).identifier === "citizenid" ? JSON.parse(player.job).label + " - " + JSON.parse(player.job).grade.name : player.job + " - " + player.job_grade
                newUser.date =  JSON.parse(result.message).identifier === "citizenid" ? moment(JSON.parse(player.charinfo).birthdate).format("DD.MM.YYYY") : moment(player.dateofbirth).format("DD.MM.YYYY")
                newUser.time = player.onlineTime ?? "Not Detected."
                newUser.male = JSON.parse(result.message).identifier === "citizenid" ? JSON.parse(player.charinfo).gender === 0 ? "Male" : "Female" : player.sex === "m" ? "Male" : "Female"
                newUser.status = "Deleted"
                newUser.icon = player.playerAvatar ?? "img/DefaultIcon.png"
                newUser.admin = 0
                newUser.uid = player[JSON.parse(result.message).identifier]
    
                this.deletedPlayers.push(newUser)
            })
        }

        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.InfoGranted = userDetails.permissions["Players"][4]

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

    created: function() {
        console.log("Created.")

        const fragment = new URLSearchParams(window.location.hash.slice(1))
        const playerId = fragment.get("id")
        if (!playerId) return
    }
})