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

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

        notifyMenu: false,
        newNotify: false,
        inPage: "Roles", // Roles | SignUpRequests | RoleSettings

        // Popups
        CreateNewRole: false,
        DeleteRole: false,
        TakeRole: false,
        SetRoleUser: {
            username: "",
            avatar: ""
        },
        SetRole: false,
        // Popups

        activeCategory: "all",
        searchValue: "",

        allRoles: [],
        fullAccessRoles: [],
        partialAccessRoles: [],
        toShowRoles: [],

        allRequests: [],
        acceptedRequests: [],
        deniedRequests: [],
        awaitingRequests: [],
        toShowAwaitingRequests: [],

        SelectedRole: {},

        RoleChangedCategories: {
            "Dashboard": false,
            "Players": false,
            "Accounts": false,
            "LiveMap": false,
            "Vehicles": false,
            "Items": false,
            "Jobs": false,
            "Factions": false,
            "Logs": false,
            "LiveConsole": false,
            "Resources": false,
            "Admins": false,
            "Management": false
        },
        CategorySections: {
            "Dashboard": [
                { name: "Display section", checkmark: false },
                { name: "Update Panel", checkmark: false },
                { name: "Display Onlines Overview", checkmark: false },
                { name: "Make Announcement", checkmark: false },
                { name: "Kick Players", checkmark: false },
                { name: "Quick Console Usage", checkmark: false },
            ],
            "Players": [
                { name: "Display section", checkmark: false },
                { name: "Access to player inspect", checkmark: false },
                { name: "Access to deleted characters", checkmark: false },
                { name: "Able to activate deleted character", checkmark: false },
                { name: "Access to general information", checkmark: false },
                { name: "Able to take or give VIP", checkmark: false },
                { name: "Able to edit character info", checkmark: false },
                { name: "Able to use actions", checkmark: false },
                { name: "Access to character status", checkmark: false },
                { name: "Able to edit character status", checkmark: false },
                { name: "Access to character money", checkmark: false },
                { name: "Able to edit character money", checkmark: false },
                { name: "Access to character vehicle", checkmark: false },
                { name: "Able to add new vehicle", checkmark: false },
                { name: "Access to vehicles inspect", checkmark: false },
                { name: "Able to edit character vehicles information", checkmark: false },
                { name: "Access to character inventory", checkmark: false },
                { name: "Able to edit inventory", checkmark: false },
                { name: "Able to clear character inventory", checkmark: false },
                { name: "Access to character logs", checkmark: false }
            ],
            "Accounts": [
                { name: "Display section", checkmark: false },
                { name: "Access to account inspects", checkmark: false },
                { name: "Able to add blacklist account or unblacklist accounts", checkmark: false }
            ],
            "LiveMap": [
                { name: "Display section", checkmark: false },
                { name: "Able to create new blip or delete blips", checkmark: false }
            ],
            "Vehicles": [
                { name: "Display section", checkmark: false },
                { name: "Access to vehicle inspect", checkmark: false },
                { name: "Access to owned vehicles", checkmark: false },
                { name: "Able to add vehicle image", checkmark: false },
                { name: "Able to use action", checkmark: false },
                { name: "Able to give vehicle to player", checkmark: false }
            ],
            "Items": [
                { name: "Display section", checkmark: false },
                { name: "Access to item inspects", checkmark: false }
            ],
            "Jobs": [
                { name: "Display section", checkmark: false },
                { name: "Access to job inspects", checkmark: false },
                { name: "Able to change job type", checkmark: false },
                { name: "Able to upload job logo", checkmark: false },
                { name: "Able to set job to player", checkmark: false }
            ],
            "Factions": [
                { name: "Display section", checkmark: false },
                { name: "Access to faction inspects", checkmark: false },
                { name: "Able to change faction type", checkmark: false },
                { name: "Able to upload faction logo", checkmark: false },
                { name: "Able to set faction to player", checkmark: false }
            ],
            "Logs": [
                { name: "Display section", checkmark: false },
            ],
            "LiveConsole": [
                { name: "Display section", checkmark: false },
            ],
            "Resources": [
                { name: "Display section", checkmark: false },
                { name: "Access to resource actions", checkmark: false }
            ],
            "Admins": [
                { name: "Display section", checkmark: false },
                { name: "Able to add new admin", checkmark: false },
                { name: "Able to take admin perm", checkmark: false }
            ],
            "Management": [
                { name: "Display section", checkmark: false },
                { name: "Access to role inspects", checkmark: false },
                { name: "Access to sign up request", checkmark: false },
                { name: "Able to create new role", checkmark: false },
                { name: "Able to delete role", checkmark: false },
                { name: "Able to add role to user", checkmark: false },
                { name: "Able to remove role from user", checkmark: false },
                { name: "Able to edit dashboard perms", checkmark: false },
                { name: "Able to edit player perms", checkmark: false },
                { name: "Able to edit account perms", checkmark: false },
                { name: "Able to edit live map perms", checkmark: false },
                { name: "Able to edit vehicle perms", checkmark: false },
                { name: "Able to edit item perms", checkmark: false },
                { name: "Able to edit job perms", checkmark: false },
                { name: "Able to edit faction perms", checkmark: false },
                { name: "Able to edit log perms", checkmark: false },
                { name: "Able to edit live console perms", checkmark: false },
                { name: "Able to edit resources perms", checkmark: false },
                { name: "Able to edit admin perms", checkmark: false },
                { name: "Able to edit management perms", checkmark: false },
            ]
        },

        CategoryToPerm: {
            "Dashboard": 7,
            "Players": 8,
            "Accounts": 9,
            "LiveMap": 10,
            "Vehicles": 11,
            "Items": 12,
            "Jobs": 13,
            "Factions": 14,
            "Logs": 15,
            "LiveConsole": 16,
            "Resources": 17,
            "Admins": 18,
            "Management": 19
        },

        AllUsers: [
            { icon: "", name: "Lvorex" },
            { icon: "", name: "Lvorex2" },
            { icon: "", name: "Lvorex" },
            { icon: "", name: "2Lvorex" },
            { icon: "", name: "Lvorex" },
            { icon: "", name: "Lvorex" },
            { icon: "", name: "Lvorex" },
            { icon: "", name: "Lvorex" },
            { icon: "", name: "Lvorex" }
        ],
        ToShowUsers: [
            { icon: "", name: "Lvorex" },
            { icon: "", name: "Lvorex" },
            { icon: "", name: "Lvorex" },
            { icon: "", name: "Lvorex" },
            { icon: "", name: "Lvorex" },
            { icon: "", name: "Lvorex" },
            { icon: "", name: "Lvorex" },
            { icon: "", name: "Lvorex" },
            { icon: "", name: "Lvorex" }
        ],
    },
    components : {
        "m-navbar": navbarComp,
        "left-navbar": leftNavbarComp
    },
    methods: {
        resetSelectMenu: function(e) {
            if (this.SetRole.ShowDropdown !== false && e.target.id !== "staff-search-input") {
                this.SetRole.ShowDropdown = false
            }
        },

        SetRoleToUser: async function() {
            if (this.SetRoleUser.username === "") {
                this.newNotify = {
                    desc: "You need to select a user.",
                    author: "System"
                }
                this.SetRole = false
                return
            }

            if (!this.AllUsers.find(u => u.username === this.SetRoleUser.username)) {
                this.newNotify = {
                    desc: "Selected user not found.",
                    author: "System"
                }
                this.SetRole = false
                this.SetRoleUser = { username: "", avatar: "" }
                return
            }

            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/SetRoleToUser.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    User: this.SetRoleUser.username,
                    RoleName: this.SelectedRole.name
                })
            })
            result = await result.json()

            this.SelectedRole.users.push(this.SetRoleUser)

            this.newNotify = {
                desc: result.message,
                author: "System"
            }
            this.SetRole = false
            this.SetRoleUser = { username: "", avatar: "" }
        },

        takeRoleFromUser: async function(user, index) {
            if (this.SelectedRole.name === "Not Authorized") {
                this.newNotify = {
                    desc: "You can't remove 'Not Authorized' role from anyone.",
                    author: "System"
                }
                this.TakeRole = false
                return
            }

            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/TakeRoleFromUser.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    ExpectedUser: user
                })
            })
            result = await result.json()

            this.newNotify = {
                desc: result.message,
                author: "System"
            }
            this.TakeRole = false

            if (result.code === 200) {
                this.SelectedRole.users.splice(index, 1)
            }
        },

        ControlCheckmarkedPermission: function(index) {
            const PermIndex = this.CategoryToPerm[this.activeCategory]
            const Result = this.userPermissions["Management"][PermIndex]
            if (Result === false) {
                this.newNotify = {
                    desc: "Your rank is not enough.",
                    author: "System"
                }
                this.CategorySections[this.activeCategory][index].checkmark = !this.CategorySections[this.activeCategory][index].checkmark
                this.RoleChangedCategories[this.activeCategory] = false
                return
            }
        },

        SavePermissions: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/UpdateRole.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    NewPatternDraft: this.CategorySections,
                    RoleName: this.SelectedRole.name
                })
            })
            result = await result.json()

            this.newNotify = {
                desc: result.message,
                author: "System"
            }

            await this.refreshRoles()
        },

        inspectRequest: async function(type, name) {
            let result = undefined
            let toChangeRequest = undefined

            if (type === "ReConsider") {
                const ExpectedRequest = this.allRequests.find(r => r.username === name)
                if (ExpectedRequest.request === 0) return
                ExpectedRequest.request = 1
            } else if (type === "Accept") {
                const ExpectedRequest = this.allRequests.find(r => r.username === name)
                toChangeRequest = 0
                result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/AcceptRegisterRequest.lvorex`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        AcceptedRequest: ExpectedRequest
                    })
                })
                this.refreshUsers()
            } else if (type === "Deny") {
                const ExpectedRequest = this.allRequests.find(r => r.username === name)
                toChangeRequest = -1
                result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/DenyRegisterRequest.lvorex`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        DeniedName: name
                    })
                })
            }

            if (result !== undefined) {
                result = await result.json()
                console.log(result)
                this.newNotify = {
                    desc: result.message,
                    author: "System"
                }
                if (result.code === 200) {
                    const ExpectedRequest = this.allRequests.find(r => r.username === name)
                    ExpectedRequest.request = toChangeRequest
                }
            }

            this.awaitingRequests = this.allRequests.filter(r => r.request === 1)
            this.acceptedRequests = this.allRequests.filter(r => r.request === 0)
            this.deniedRequests = this.allRequests.filter(r => r.request === -1)
            this.toShowAwaitingRequests = this[this.activeCategory+"Requests"]
        },

        inspectRole: function(role) {
            this.SelectedRole = role

            const RolePattern = JSON.parse(this.SelectedRole.pattern)
            Object.entries(RolePattern).forEach(([key, value]) => {
                if (key === "FullPermission") return
                console.log(key, value)
                value.forEach((v,i) => {
                    console.log(this.CategorySections[key][i])
                    this.CategorySections[key][i].checkmark = v
                })
            })

            this.inPage = "RoleSettings"
            this.activeCategory = "Dashboard"
            setTimeout(() => {
                const swiper = new Swiper('.swiper', {
                    slidesPerView: 'auto',
                    spaceBetween: 10,
                });
            }, 100)
        },

        togglePopup: function(popupName) {
            if (popupName = "CreateNewRole") {
                this.CreateNewRole = {
                    RoleName: "",
                    FullAccess: false
                }
            }
        },

        createNewRole: async function() {
            const {RoleName, FullAccess} =this.CreateNewRole
            if (this.allRoles.find(r => r.name.toLowerCase() === RoleName.toLowerCase())) {
                this.newNotify = {
                    desc: "This role name is already in use.",
                    author: "System"
                }
                this.CreateNewRole = false
                return
            }
            if (RoleName === "" || RoleName === " " || RoleName === null) {
                this.newNotify = {
                    desc: "Role name can't be empty.",
                    author: "System"
                }
                this.CreateNewRole = false
                return
            }

            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/CreateNewRole.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    RoleName,
                    FullAccess
                })
            })
            result = await result.json()

            this.newNotify = {
                desc: result.message,
                author: "System"
            }
            this.CreateNewRole = false

            if (result.code === 200) {
                await this.refreshRoles()
            }
        },

        deleteRole: async function() {
            if (this.SelectedRole.createdBy === "System") {
                this.newNotify = {
                    desc: "You can't delete a role created by System.",
                    author: "System"
                }
                this.DeleteRole = false
                return
            }

            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/DeleteRole.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    ExpectedRole: this.SelectedRole
                })
            })
            result = await result.json()
            this.DeleteRole = false
            
            this.newNotify = {
                desc: result.message,
                author: "System"
            }

            if (result.code === 200) {
                const index = this.allRoles.findIndex(r => r.name === this.SelectedRole.name)
                this.allRoles.splice(index, 1)
                this.fullAccessRoles = this.allRoles.filter(r => JSON.parse(r.pattern).FullPermission === true)
                this.partialAccessRoles = this.allRoles.filter(r => JSON.parse(r.pattern).FullPermission !== true)
                this.inPage = "Roles"
            }
        },

        refreshRoles: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getAllRoles.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.allRoles = result.message
            this.fullAccessRoles = this.allRoles.filter(r => JSON.parse(r.pattern).FullPermission === true)
            this.partialAccessRoles = this.allRoles.filter(r => JSON.parse(r.pattern).FullPermission !== true)

            this.toShowRoles = this.allRoles
        },

        refreshRequests: async function() {
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getWaitingRequests.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.allRequests = result.message
            this.awaitingRequests = this.allRequests.filter(r => r.request === 1)
            this.acceptedRequests = this.allRequests.filter(r => r.request === 0)
            this.deniedRequests = this.allRequests.filter(r => r.request === -1)
            this.toShowAwaitingRequests = this.allRequests
        },

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

        changeCategory: async function(toCategory) {
            if (this.inPage === "Roles") {
                this.toShowRoles = this[toCategory+"Roles"]
                this.activeCategory = toCategory
            } else if (this.inPage === "SignUpRequests") {
                this.toShowAwaitingRequests = this[toCategory+"Requests"]
                this.activeCategory = toCategory
            } else if (this.inPage === "RoleSettings") {
                this.activeCategory = toCategory
            }
        },

        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/copyIcon.png"
                event.target.style.pointerEvents = ""
            }, 2000)
        },

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

        showInfoOfPlayer: function(playerId) {
            location.href = "/Panel/Players/Info/#uid="+playerId
        }
    },
    watch: {
        searchValue: function(newValue) {
            if (this.inPage === "Roles") {
                this.toShowRoles = this[this.activeCategory+"Roles"]
                this.toShowRoles = this.toShowRoles.filter(r => r.name.toLowerCase().includes(newValue.toLowerCase()))
            } else if (this.inPage === "SignUpRequests") {
                this.toShowAwaitingRequests = this[this.activeCategory+"Requests"]
                this.toShowAwaitingRequests = this.toShowAwaitingRequests.filter(r => r.username.toLowerCase().includes(newValue.toLowerCase()))
            }
        },

        SetRoleUser: {
            handler(newValue, oldValue) {
                this.ToShowUsers = this.AllUsers
                this.ToShowUsers = this.ToShowUsers.filter(u => u.username.toLowerCase().includes(newValue.username.toLowerCase()))
            },
            deep: true
        }
    },
    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

        await this.refreshRoles()
        await this.refreshRequests()
        await this.refreshUsers()

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