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

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

        notifyMenu: false,
        newNotify: false,

        loadCount: 12,
        selectedCategory: false,

        activeCategory: "all",
        searchValue: "",

        allVehicles: [],
        vanillaVehicles: [],
        importVehicles: [],
        classesVehicles: [],
        toShowVehicles: [],

        ownedallVehicles: [],
        ownedvanillaVehicles: [],
        ownedimportVehicles: [],
        ownedclassesVehicles: [],

        vcasMenuMaximized: false,
        selectedVehicleCategory: { name: "", value: "" },
        vehicleCategories: [
            { name: "Boats", value: "boats" },
            { name: "Commercials", value: "commercials" },
            { name: "Compacts", value: "compacts" },
            { name: "Coupes", value: "coupes" },
            { name: "Cycles", value: "cycles" },
            { name: "Emergency", value: "emergency" },
            { name: "Helicopters", value: "helicopters" },
            { name: "Industrial", value: "industrial" },
            { name: "Military", value: "military" },
            { name: "Motorcycles", value: "motorcycles" },
            { name: "Muslce", value: "muscle" },
            { name: "Off-road", value: "offroad" },
            { name: "Open Wheel", value: "openwheel" },
            { name: "Planes", value: "planes" },
            { name: "SUV's", value: "suvs" },
            { name: "Sedans", value: "sedans" },
            { name: "Service", value: "service" },
            { name: "Sports", value: "sports" },
            { name: "Sports Classic", value: "sportsclassics" },
            { name: "Super", value: "super" },
            { name: "Utility", value: "utility" },
            { name: "Vans", value: "vans" },
        ],
        vehicleClasses: [
            {name: "E"},
            {name: "D"},
            {name: "C"},
            {name: "B"},
            {name: "A"},
            {name: "A+"},
            {name: "S"},
            {name: "S+"},
        ]
    },
    components: {
        "m-navbar": navbarComp,
        "left-navbar": leftNavbarComp
    },
    methods: {
        checkScroll() {
            let list = this.$refs.list;
            if (list.scrollTop + list.clientHeight >= list.scrollHeight) {
                this.loadMoreData();
            }
        },
    
        loadMoreData() {
            if (this.selectedCategory) return
            let nextData = this[this.activeCategory+"Vehicles"].slice(this.toShowVehicles.length, this.toShowVehicles.length + this.loadCount);
            this.toShowVehicles = this.toShowVehicles.concat(nextData);
        },

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

            if (this.activeCategory.includes("owned")) {
                location.href = `/Panel/Players/Info/?vehicle=${data.plate}#uid=${data.ownerCitizenid}`
            } else {
                location.href = `/Panel/Vehicles/Info/?type=server&model=${data.model}`
            }
        },

        changeCategory: function(event) {
            const to = event.target.className.split(" ")[0]
            if (this.activeCategory === to) return

            if (this.activeCategory.includes("owned")) {
                this.activeCategory = `owned${to}`
            } else {
                this.activeCategory = to
            }
            this.selectedCategory = false
            this.toShowVehicles = this[this.activeCategory+"Vehicles"].slice(0, this.loadCount)
        },

        changeVehicleCategory: function(category) {
            this.toShowVehicles = this[this.activeCategory+"Vehicles"]
            this.vcasMenuMaximized = false
            if (category === "all") {
                this.selectedCategory = false
                this.toShowVehicles = this[this.activeCategory+"Vehicles"].slice(0, this.loadCount)
                this.selectedVehicleCategory = { name: "", value: "" }
                return
            }

            this.selectedCategory = true
            if (!this.vehicleCategories.some(c => c.value === category.value)) {
                this.toShowVehicles = this[this.activeCategory+"Vehicles"].filter(v => v.class === category.name)
            } else {
                this.toShowVehicles = this[this.activeCategory+"Vehicles"].filter(v => v.categoryValue === category.value)
            }
            
            this.selectedVehicleCategory = category
        },

        changeListMode: async function () {
            const classes = {
                C: 0,
                B: 1,
                A: 2,
                "A+": 3,
                S: 4,
                "S+": 5
            }

            if (this.activeCategory.includes("owned")) {
                this.activeCategory = this.activeCategory.replace("owned", "")
            } else {
                if (this.userPermissions["Vehicles"][2] === false) {
                    this.newNotify = {
                        desc: "Your rank is not enough.",
                        author: "System"
                    }
                    return
                }

                if (this.ownedallVehicles.length === 0) {
                    let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getOwnedVehicles.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.ownedallVehicles = result.message
                    this.ownedallVehicles.sort((a,b) => classes[b.class]-classes[a.class])

                    this.ownedimportVehicles = this.ownedallVehicles.filter(v => v.import === 1)
                    this.ownedvanillaVehicles = this.ownedallVehicles.filter(v => v.import === 0)
                    this.ownedclassesVehicles = this.ownedallVehicles
                }
                this.activeCategory = `owned${this.activeCategory}`
            }

            this.toShowVehicles = this[this.activeCategory+"Vehicles"].slice(0, this.loadCount)
        }
    },
    watch: {
        searchValue: function(newValue) {
            this.toShowVehicles = this[this.activeCategory+"Vehicles"]
            this.toShowVehicles = this.toShowVehicles.filter(
                vehicle => 
                vehicle.brand.toLowerCase().includes(newValue.toLowerCase()) ||
                vehicle.model.toLowerCase().includes(newValue.toLowerCase()) ||
                vehicle.label.toLowerCase().includes(newValue.toLowerCase())
            )
        }
    },
    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(`/getServerVehicles.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.allVehicles = result.message

        const classes = {
            "E": 0,
            "D": 1,
            "C": 2,
            "B": 3,
            "A": 4,
            "A+": 5,
            "S": 6,
            "S+": 7
        }

        this.allVehicles.sort((a,b) => classes[b.class]-classes[a.class])
        this.importVehicles = this.allVehicles.filter(v => v.import === 1)
        this.vanillaVehicles = this.allVehicles.filter(v => v.import === 0)
        this.classesVehicles = this.allVehicles
        this.toShowVehicles = this.allVehicles.slice(0, this.loadCount)

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