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, weapon, useable, craftable, unique

        toShowFactions: [],
        allFactions: [],
        gangsFactions: [],
        familiesFactions: [],
        mobsFactions: [],
        crewsFactions: [],

        factionTypes: ["gangs", "families", "mobs", "crews"],

        selectedFaction: false,
        selectedFactionInputs: [
            { id: 0, label: "Faction Label", value: "", inputImage: "img/JobLabelNameTypeInputBg.png" },
            { id: 1, label: "Faction Name (Command Name)", value: "", inputImage: "img/JobLabelNameTypeInputBg.png" },
            { id: 2, label: "Faction Type", value: "", inputImage: "img/JobLabelNameTypeInputBg.png" },
            { id: 3, label: "Faction Ranks", value: "", inputImage: "img/JobGradesInputBg.png" },
            { id: 4, label: "Faction Players", value: "", inputImage: "img/JobPlayersInputBg.png" },
            { id: 5, label: "Faction's Highest Rank Player", value: "", pIdentifier: "", inputImage: "img/JobHRPInputBg.png" },
        ],
        selectedImageUrl: "",
        selectedFile: undefined,

        selectedGrade: undefined,
        gradePlayers: undefined,
        rightBoxCategory: "players", // players, grades, gradeplayers

        popup: undefined
    },
    components : {
        "m-navbar": navbarComp,
        "left-navbar": leftNavbarComp
    },
    watch: {
        searchValue: function(newValue) {
            this.toShowFactions = this[this.activeCategory+"Factions"]
            this.toShowFactions = this.toShowFactions.filter(
                item => 
                item.label.toLowerCase().includes(newValue.toLowerCase()) ||
                item.code.toLowerCase().includes(newValue.toLowerCase())
            )
        }
    },
    methods: {
        inspectPlayer: function(identifier) {
            if (!identifier) return
            location.href = `/Panel/Players/Info/#uid=${identifier}`
        },

        triggerFileInput: function() {
            if (this.userPermissions["Factions"][3] === false) {
                this.newNotify = {
                    desc: "Your rank is not enough.",
                    author: "System"
                }
                return
            }

            document.getElementById("vinfo-left-right-realFile").click()
        },

        changeSelectedImage: function(event) {
            if (this.userPermissions["Factions"][3] === false) {
                this.newNotify = {
                    desc: "Your rank is not enough.",
                    author: "System"
                }
                return
            }

            const SentFile = event.target.files[0]
            const fileReader = new FileReader()
            let imageUrl = ""
            const vm = this
            fileReader.addEventListener("load", () => {
                imageUrl = fileReader.result
                vm.selectedFile = SentFile
                console.log(SentFile.path)
                vm.selectedImage = imageUrl
            })
            fileReader.readAsDataURL(SentFile)
        },

        openSetJobPopup: function() {
            this.popup = {
                grade: "",
                level: "",
                type: "setjob"
            }
        },

        openGradeJobPopup: function(grade, level) {
            this.popup = {
                grade,
                level,
                type: "setgrade"
            }
        },

        uploadImage: async function() {
            if (this.userPermissions["Factions"][3] === false) {
                this.newNotify = {
                    desc: "Your rank is not enough.",
                    author: "System"
                }
                return
            }

            if (this.selectedImageUrl && this.selectedImageUrl.includes(":")) {
                let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeFactionLogoByLink.lvorex`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        faction: this.selectedFaction.code,
                        link: this.selectedImageUrl
                    })
                })
                result = await result.json()
                if (result.code !== 200) return console.log(result.message)
                document.getElementById("vinfo-left-right-file").style.backgroundImage = `url(${this.selectedImageUrl})`
                this.selectedFaction.image = this.selectedImageUrl
                return
            }
            if (!this.selectedImage) return  
            console.log(this.selectedFile)
            const formData = new FormData()
            formData.append("file", this.selectedFile)
            formData.append("key", sha1(sessionStorage.getItem("uid-key")))
            formData.append("faction", this.selectedFaction.code)
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeFactionLogo.lvorex`, {
                method: "POST",
                body: formData
            })
            result = await result.json()
            if (result.code !== 200) return console.log(result.message)

            document.getElementById("vinfo-left-right-file").style.backgroundImage = `url(${this.selectedImage})`
            this.selectedFaction.image = this.selectedImage
            this.selectedImage = undefined
        },

        clearImage: async function() {
            if (this.userPermissions["Factions"][3] === false) {
                this.newNotify = {
                    desc: "Your rank is not enough.",
                    author: "System"
                }
                return
            }

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

            document.getElementById("vinfo-left-right-file").style.backgroundImage = ""
            this.selectedFaction.image = "img/DefaultFactionIcon.png"
            this.selectedImage = undefined
        },

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

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

            const currentTypeIndex = this.factionTypes.findIndex(t => t === this.selectedFaction.type)

            this.selectedFaction.type = this.factionTypes[currentTypeIndex + 1] === undefined ? this.factionTypes[0] : this.factionTypes[currentTypeIndex + 1]
            this.selectedFactionInputs[2].value = this.factionTypes[currentTypeIndex + 1] === undefined ? this.factionTypes[0] : this.factionTypes[currentTypeIndex + 1]
            this.allFactions.find(j => j.code === this.selectedFaction.code).type = this.factionTypes[currentTypeIndex + 1] === undefined ? this.factionTypes[0] : this.factionTypes[currentTypeIndex + 1]

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

            this.gangsFactions = this.allFactions.filter(f => f.type === 'gangs')
            this.familiesFactions = this.allFactions.filter(f => f.type === 'families')
            this.mobsFactions = this.allFactions.filter(f => f.type === 'mobs')
            this.crewsFactions = this.allFactions.filter(f => f.type === 'crews')
        },

        selectItem: function(item) {
            if (this.userPermissions["Factions"][1] === false) {
                this.newNotify = {
                    desc: "Your rank is not enough.",
                    author: "System"
                }
                return
            }

            this.selectedFaction = item

            this.selectedFactionInputs[0].value = item.label
            this.selectedFactionInputs[1].value = item.code
            this.selectedFactionInputs[2].value = item.type
            this.selectedFactionInputs[3].value = Object.entries(item.grades).length+" Rank"
            this.selectedFactionInputs[4].value = item.factionMembers.length+" Player",
            this.selectedFactionInputs[5].value = item.mostRankedPlayer.name === '' ? 'Not Found.' : item.mostRankedPlayer.name,
            this.selectedFactionInputs[5].pIdentifier = item.mostRankedPlayer.identifier
        },

        selectGrade: function(grade) {
            this.gradePlayers = this.selectedFaction.factionMembers.filter(p => Number(p.grade) === Number(grade))
            this.selectedGrade = {
                name: Object.entries(this.selectedFaction.grades).find(([k , v]) => k === grade)[1].name,
                level: Object.entries(this.selectedFaction.grades).find(([k , v]) => k === grade)[0]
            }
            this.rightBoxCategory = "gradeplayers"
        },

        autoCompleteWithGradeName: function(event) {
            const inputElement = event.target
            if (
                inputElement.value === '' || 
                inputElement.value.includes(" ") || 
                isNaN(Number(inputElement.value)) ||  
                !this.selectedFaction.grades[Number(inputElement.value)]
            ) return
            this.popup.level = event.target.value
            this.popup.grade = this.selectedFaction.grades[Number(inputElement.value)].name
            inputElement.disabled = true
        },

        setJobToPlayer: async function() {
            if (this.userPermissions["Factions"][4] === false) {
                this.newNotify = {
                    desc: "Your rank is not enough.",
                    author: "System"
                }
                return
            }

            let gradeLevel = this.popup.level
            let pIdentifier = document.getElementById("popupPlayerIdentifier").value
            if (
                !pIdentifier ||
                pIdentifier === "" ||
                pIdentifier.includes(" ")
            ) return

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

        goBackToGrades: function() {
            this.gradePlayers = undefined
            this.selectedGrade = undefined
            this.rightBoxCategory = "grades"
        },

        goBackToItemsPage: function() {
            this.selectedFaction = false
            this.selectedFactionInputs = [
                { id: 0, label: "Faction Label", value: "", inputImage: "img/JobLabelNameTypeInputBg.png" },
                { id: 1, label: "Faction Name (Command Name)", value: "", inputImage: "img/JobLabelNameTypeInputBg.png" },
                { id: 2, label: "Faction Type", value: "", inputImage: "img/JobLabelNameTypeInputBg.png" },
                { id: 3, label: "Faction Ranks", value: "", inputImage: "img/JobGradesInputBg.png" },
                { id: 4, label: "Faction Players", value: "", inputImage: "img/JobPlayersInputBg.png" },
                { id: 5, label: "Faction's Highest Rank Player", value: "", pIdentifier: "", inputImage: "img/JobHRPInputBg.png" },
            ]
            this.rightBoxCategory = "players"
            this.gradePlayers = undefined
            this.selectedGrade = undefined
        }
    },
    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}/getAllFactions.lvorex`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                key: sha1(sessionStorage.getItem("uid-key"))
            })
        })
        result = await result.json()
        console.log(result.message)
        if (result.code !== 200) return console.log(result.message)
        this.allFactions = result.message
        this.toShowFactions = this.allFactions
        this.gangsFactions = this.allFactions.filter(f => f.type === 'gangs')
        this.familiesFactions = this.allFactions.filter(f => f.type === 'families')
        this.mobsFactions = this.allFactions.filter(f => f.type === 'mobs')
        this.crewsFactions = this.allFactions.filter(f => f.type === 'crews')
        // this.stateFactions = this.allFactions.filter(j => j.type === 'state')
        // this.corpFactions = this.allFactions.filter(j => j.type === 'corp')

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