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

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

        notifyMenu: false,
        newNotify: false,
        searchValue: "",

        giveVehiclePopup: undefined,

        vehicleType: "",
        vehicleImage: "img/CarImage.png",
        vehicleClasses: [
            { class: "S+", value: 7 },
            { class: "S", value: 6 },
            { class: "A+", value: 5 },
            { class: "A", value: 4 },
            { class: "B", value: 3 },
            { class: "C", value: 2 },
            { class: "D", value: 1 },
            { class: "E", value: 0 }
        ],

        selectedVehicle: {
            selectedVehicleInputs: [
                { name: "Vehicle Manufacturer",   class: "manufacturer", value: "GALLIVANTER" },
                { name: "Vehicle Model",          class: "vehmodel",     value: "Baller" },
                { name: "Vehicle Hash",           class: "hash",         value: "0x1C09CF5E" },
                { name: "Vehicle Category",       class: "category",     value: "SUV" },
                { name: "Vehicle Purchasable At", class: "shop",         value: "PDM Motorspot, DELUXE Cars by Anthon" },
                { name: "Vehicle Default Price",  class: "price",        value: "$ 800,000" },
            ],
            credentials: {
                class: "B",
                brand: "GALLIVANTER",
                name: "Baller SUV"
            }
        },

        selectedFile: undefined,
        selectedImageUrl: "",
        selectedImage: undefined
    },
    components: {
        "m-navbar": navbarComp,
        "left-navbar": leftNavbarComp
    },
    methods: {
        giveVehicleToPlayer: async function() {
            if (this.userPermissions["Vehicles"][5] === false) {
                this.newNotify = {
                    desc: "Your rank is not enough.",
                    author: "System"
                }
                return
            }

            if (!this.giveVehiclePopup) return
            const playerIdentifier = this.giveVehiclePopup.playerIdentifier
            if (
                playerIdentifier === "" ||
                playerIdentifier.includes(" ")
            ) {
                this.giveVehiclePopup.playerIdentifier = "Please enter a player id or identifier."
                setTimeout(() => {
                    this.giveVehiclePopup.playerIdentifier = ""
                }, 2000)
                return
            }

            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/vehiclesGiveVehicleToPlayer.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    model: this.selectedVehicle.credentials.model,
                    playerIdentifier: playerIdentifier
                })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.giveVehiclePopup.playerIdentifier = result.message
                setTimeout(() => {
                    this.giveVehiclePopup.playerIdentifier = ""
                }, 2000)
                return
            }

            this.giveVehiclePopup = undefined
        },
        
        goBackToVehicles: function() {
            location.href = "/Panel/Vehicles/"
        },

        triggerFileInput: function() {
            document.getElementById("vinfo-left-right-realFile").click()
        },

        changeSelectedImage: function(event) {
            if (this.userPermissions["Vehicles"][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)
        },

        uploadImage: async function() {
            if (this.userPermissions["Vehicles"][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}/changeVehicleImageByLink.lvorex`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        model: this.selectedVehicle.credentials.model,
                        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.vehicleImage = 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("model", this.selectedVehicle.credentials.model)
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/changeVehicleImage.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.vehicleImage = this.selectedImage
            this.selectedImage = undefined
        },

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

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

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

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

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

            this.selectedVehicle.credentials.class = c
        },

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

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

            this.selectedVehicle.credentials.import = status
        }
    },
    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)
        if (userDetails.permissions["Vehicles"][1] === false) {
            location.href = "/Panel/Vehicles"
            return
        }

        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

        const fragments = new URLSearchParams(window.location.search)
        const [
            vehicleType,
            vehicleModel
        ] = [
            fragments.get("type"),
            fragments.get("model"),
            fragments.get("plate")
        ]
        if (vehicleType === "server") {
            let 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)
            const allVehicles = result.message
            const NeededVehicle = allVehicles.find(v => v.model === vehicleModel)
            this.selectedVehicle = {
                selectedVehicleInputs: [
                    { name: "Vehicle Manufacturer",   class: "manufacturer", value: NeededVehicle.brand },
                    { name: "Vehicle Model",          class: "vehmodel",     value: NeededVehicle.label },
                    { name: "Vehicle Hash",           class: "hash",         value: NeededVehicle.hash },
                    { name: "Vehicle Category",       class: "category",     value: NeededVehicle.category },
                    { name: "Vehicle Purchasable At", class: "shop",         value: NeededVehicle.shop },
                    { name: "Vehicle Default Price",  class: "price",        value: `$ ${NeededVehicle.price.toLocaleString()}` },
                ],
                credentials: {
                    class: NeededVehicle.class,
                    brand: NeededVehicle.brand,
                    name: NeededVehicle.label,
                    model: NeededVehicle.model,
                    import: NeededVehicle.import,
                    image: NeededVehicle.image
                }
            }
            this.vehicleImage = NeededVehicle.image
            if (this.vehicleImage !== "img/CarImage.png") {
                document.getElementById("vinfo-left-right-file").style.backgroundImage = `url(${this.vehicleImage})`
            }
        }

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