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

        loadCount: 15,

        serverFramework: undefined,

        notifyMenu: false,
        newNotify: false,

        activeCategory: "all", // all, weapon, useable, craftable, unique

        toShowItems: [],
        allItems: [],
        weaponItems: [],
        useableItems: [],
        craftableItems: [],
        uniqueItems: [],

        selectedItem: false,
        selectedItemInputs: false
    },
    components : {
        "m-navbar": navbarComp,
        "left-navbar": leftNavbarComp
    },
    watch: {
        searchValue: function(newValue) {
            this.toShowItems = this[this.activeCategory+"Items"]
            this.toShowItems = this.toShowItems.filter(
                item => 
                item.label.toLowerCase().includes(newValue.toLowerCase()) ||
                item.code.toLowerCase().includes(newValue.toLowerCase())
            )
        }
    },
    methods: {
        checkScroll() {
            let list = this.$refs.list;
            if (list.scrollTop + list.clientHeight >= list.scrollHeight) {
                this.loadMoreData();
            }
        },
    
        loadMoreData() {
            let nextData = this[this.activeCategory+"Items"].slice(this.toShowItems.length, this.toShowItems.length + this.loadCount);
            this.toShowItems = this.toShowItems.concat(nextData);
        },

        changeCategory: async function(changeto) {
            this.activeCategory = changeto
            this.toShowItems = this[changeto+"Items"].slice(0, this.loadCount)
        },

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

            if (isCraftItem) {
                const sharedItem = this.allItems.find(i => i.code === item)
                if (!sharedItem) return
                this.selectedItem = sharedItem
            } else {
                document.getElementById("panel-content").style.backgroundImage = `url(../../img/panel${this.darkMode === true ? "Dark" : "Light"}ModeItems.png)`
                this.selectedItem = item
            }

            this.selectedItemInputs = [
                { id: 0, label: "Item Label", value: this.selectedItem.label, inputImage: "img/ItemLabelNameDescInputBg.png" },
                { id: 1, label: "Item Name (Command Name)", value: this.selectedItem.code, inputImage: "img/ItemLabelNameDescInputBg.png" },
                { id: 2, label: "Item Description", value: `"${this.selectedItem.desc}"`, inputImage: "img/ItemLabelNameDescInputBg.png" },
                { id: 3, label: "Item Weight", value: `${this.selectedItem.weight} gr`, inputImage: "img/ItemWeightInputBg.png" },
                { id: 4, label: "Item Type", value: this.selectedItem.type, inputImage: "img/ItemTypeInputBg.png" },
                { id: 5, label: "Item Usability", value: this.selectedItem.useable === 'ESX' ? 'Not found.' : this.selectedItem.useable ? 'Usable' : 'Non-Usable', inputImage: "img/ItemUsabilityInputBg.png" },
                { id: 6, label: "Item Uniqeness", value: this.selectedItem.unique ? 'Unique' : 'Non-Unique', inputImage: "img/ItemUniqenessInputBg.png" },
                { id: 7, label: "Close After Usage", value: this.selectedItem.closeafterusage, inputImage: "img/ItemCloseAfterUsageInputBg.png" }
            ]
            if (this.selectedItem.type === 'weapon') {
                this.selectedItemInputs[5] = {
                    id: 5,
                    label: "Weapon Ammo Type",
                    value: this.selectedItem.ammotype ? this.selectedItem.ammotype : 'Not Found.',
                    inputImage: "img/ItemAmmoTypeInputBg.png"
                }
                this.selectedItemInputs[7].value = "true"
            }
        },

        goBackToItemsPage: function() {
            this.selectedItem = false
            this.selectedItemInputs = false
        }
    },
    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)

        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.userPermission = userDetails.permissions

        result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getAllSharedItems.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)
        this.allItems = result.message
        this.toShowItems = this.allItems.slice(0, this.loadCount)
        this.useableItems = this.allItems.filter(item => item.useable === true)
        this.weaponItems = this.allItems.filter(item => item.type === 'weapon')
        this.uniqueItems = this.allItems.filter(item => item.unique === true)
        this.craftableItems = this.allItems.filter(item => item.craftable !== false)

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