var app = new Vue({
    el: "#app",
    data: {
        darkMode: false,
        userUsername: "Lvorex",
        userRank: { title: "Admin", color: "#F34240" },
        userIcon: "",
        userPermissions: undefined,
        accountType: "",
        refreshingResources: false,

        searchValue: "",

        notifyMenu: false,
        newNotify: false,

        announcementPopup: undefined,

        resources: [
            { name: "mAdmin", status: "start" }, // start, stop, restart
        ],
        toShowResources: []
    },
    components : {
        "m-navbar": navbarComp,
        "left-navbar": leftNavbarComp
    },
    watch: {
        searchValue: function(newValue) {
            this.toShowResources = this.resources.filter(l => l.name.toLowerCase().includes(newValue))
        }
    },
    methods: {
        rotateElement: function(element) {
            element.classList.toggle("rotate")
        },

        getAllResources: async function() {
            result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getAllResources.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)
            this.resources = result.message
            this.toShowResources = this.resources
            return true
        },

        refreshResources: async function(element) {
            if (this.refreshingResources === true) return
            
            this.rotateElement(element)
            this.refreshingResources = true
            setTimeout(async () => {
                await this.getAllResources()
                this.rotateElement(element)
            }, 2000)
        },
        
        APISendToggleResource: async function(action, resource) {
            if (this.userPermissions["Resources"][1] === false) {
                this.newNotify = {
                    desc: "Your rank is not enough.",
                    author: "System"
                }
                return
            }

            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/toggleResourceState.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    action: action,
                    resource: resource.name
                })
            })
            result = await result.json()
            if (result.code !== 200) return result.message
            return true
        },

        restartResource: async function(element, resource) {
            if (this.userPermissions["Resources"][1] === false) {
                this.newNotify = {
                    desc: "Your rank is not enough.",
                    author: "System"
                }
                return
            }

            element.style.pointerEvents = "none"
            this.rotateElement(element)
            resource.status = "restart"
            setTimeout(async () => {
                const result = await this.APISendToggleResource("restart", resource)
                if (result !== true) {
                    resource.status = "stop"
                    return
                }
                resource.status = "start"
                this.rotateElement(element)
                element.style.pointerEvents = ""
            }, 5000)
        },

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

            if (resource.status === "start") {
                const result = await this.APISendToggleResource("stop", resource)
                if (result !== true) return console.log(result)
                resource.status = "stop"
            } else {
                const result = await this.APISendToggleResource("start", resource)
                if (result !== true) return console.log(result)
                resource.status = "start"
            }
        },
    },
    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

        await this.getAllResources()

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