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

        notifyMenu: false,
        newNotify: false,

        rightPanelMinimized: false,
        rightPanelCategory: "players",

        newBlipPopup: undefined,
        deleteBlipPopup: undefined,

        map: undefined,
        mapStylesButtons: [
            { name: "Satelite Map", checked: true },
            { name: "Atlas Map", checked: false }
        ],
        mapStyles: {},
        mapPlayerBlips: [],
        mapVehicleBlips: [],
        mapHudBlips: [],

        selectedPlayer: {
            name: "Lvorex Lvorex",
            icon: "",
            job: "",
            id: 0,
            uid: 0,
            coords: "",
            status: ""
        },
        selectedVehicle: {
            plate: "",
            coords: [],
            label: "",
            owner: "",
            fuel: 0,
            vehicleId: 0
        },
        selectedHudBlip: {
            id: 0,
            name: "",
            coords: [],
            sprite: -1
        },
        selectedHudBlipEditing: undefined
    },
    components: {
        "m-navbar": navbarComp,
        "left-navbar": leftNavbarComp
    },
    watch: {
        searchValue: function(newValue) {
            if (this.rightPanelCategory === "players") {
                const neededPlayer = this.mapPlayerBlips.filter(p => p.name.toLowerCase().includes(newValue.toLowerCase()))[0]
                if (neededPlayer) {
                    const coords = neededPlayer.coords.split(", ")
                    this.map.setView([coords[1], coords[0]], 5)
                    this.selectedPlayer = neededPlayer
                }
            } else if (this.rightPanelCategory === "vehicles") {
                const neededVehicle = this.mapVehicleBlips.filter(p => p.plate.toLowerCase().includes(newValue.toLowerCase()))[0]
                if (neededVehicle) {
                    const coords = neededVehicle.coords
                    this.map.setView([coords[1], coords[0]], 5)
                    this.selectedVehicle = neededVehicle
                }
            } else if (this.rightPanelCategory === "hudblips") {
                const neededBlip = this.mapHudBlips.filter(p => p.name.toLowerCase().includes(newValue.toLowerCase()))[0]
                if (neededBlip) {
                    const coords = neededBlip.coords
                    this.map.setView([coords[1], coords[0]], 5)
                    this.selectedHudBlip = neededBlip
                }
            }
        }
    },
    methods: {
        editCreatedBlip: async function(save) {
            if (this.userPermissions["LiveMap"][1] === false) {
                this.newNotify = {
                    desc: "Your rank is not enough.",
                    author: "System"
                }
                return
            }

            if (!save) {
                this.selectedHudBlipEditing = {
                    name: "",
                    sprite: "",
                    coords: ""
                }
            } else {
                const credits = this.selectedHudBlipEditing
                const oldCredits = this.selectedHudBlip

                credits.name = credits.name === "" ? oldCredits.name : credits.name
                credits.sprite = credits.sprite === "" ? oldCredits.sprite : credits.sprite
                credits.coords = credits.coords === "" ? oldCredits.coords.join(" ") : credits.coords

                if (credits.coords.split(" ").length !== 3) {
                    this.newNotify = { desc: "Please type coords with correct syntax." }
                    this.selectedHudBlipEditing = undefined
                    return
                }

                let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/editScriptBlip.lvorex`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        id: Number(oldCredits.id),
                        name: credits.name,
                        sprite: Number(credits.sprite),
                        coords: credits.coords,
                        scale: oldCredits.scale,
                        color: oldCredits.color
                    })
                })
                result = await result.json()
                if (result.code !== 200) {
                    this.newNotify = { desc: result.message }
                    this.selectedHudBlipEditing = undefined
                    return
                }

                const hudBlip = this.mapHudBlips.find(w => w.id === oldCredits.id)
                hudBlip.name = credits.name
                hudBlip.sprite = Number(credits.sprite)
                hudBlip.coords = credits.coords.split(" ")

                oldCredits.name = credits.name
                oldCredits.sprite = Number(credits.sprite)
                oldCredits.coords = credits.coords.split(" ")

                this.selectedHudBlipEditing = undefined
            }
        },

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

            this.deleteBlipPopup = undefined
            this.closeItemDetailsPage()

            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/deleteScriptBlip.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    id: id
                })
            })
            result = await result.json()
            if (result.code !== 200) return console.log(result.message)
            
            const index = this.mapHudBlips.findIndex(blip => blip.id === id)
            this.mapHudBlips.splice(index, 1)
            this.changeToHudBlips()
        },

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

            const newBlipPopup = this.newBlipPopup
            if (
                newBlipPopup.name === "" ||
                newBlipPopup.sprite === null ||
                newBlipPopup.coords.split(" ").length !== 3
            ) {
                this.newNotify = { desc: "You need to fill all blanks." }
                this.newBlipPopup = undefined
                return
            }
            
            this.newBlipPopup = undefined
            console.log(Number(newBlipPopup.scale).toFixed(1))
            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/createScriptBlip.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    name: newBlipPopup.name,
                    sprite: Number(newBlipPopup.sprite),
                    coords: newBlipPopup.coords,
                    color: newBlipPopup.color,
                    scale: Number(newBlipPopup.scale).toFixed(1)
                })
            })
            result = await result.json()
            if (result.code !== 200) {
                this.newNotify = { desc: result.message }
                this.newBlipPopup = undefined
                return
            }

            const coords = newBlipPopup.coords.split(" ")
            const blip = L.marker([coords[1], coords[0]], {
                icon: L.icon({
                    iconUrl: "img/HudBlipIcon.png",
                    iconSize: [25, 37],
                    iconAnchor: [25, 37]
                })
            })

            const blipCredentials = {
                id: result.message.blip,
                name: newBlipPopup.name,
                coords: coords,
                sprite: newBlipPopup.sprite
            }
            this.mapHudBlips.push(blipCredentials)

            const vm = this
            blip.on('click', function() {
                if (vm.selectedHudBlip.id === result.message.blip) {
                    vm.closeItemDetailsPage()
                    return
                }
                vm.selectedHudBlip = blipCredentials
                vm.openItemDetailsPage("HudBlips")
            })

            blip.addTo(this.map)
        },

        removeAllBlips: function() {
            this.map.eachLayer(layer => {
                const vm = this.map
                if (layer instanceof L.Marker) {
                    vm.removeLayer(layer)
                }
            })
        },

        openItemDetailsPage: function(wanted) {
            const allItemDatas = {
                selectedPlayer: {
                    name: "Lvorex Lvorex",
                    icon: "",
                    job: "",
                    id: 0,
                    uid: 0,
                    coords: "",
                    status: ""
                },
                selectedVehicle: {
                    plate: "",
                    coords: [],
                    label: "",
                    owner: "",
                    fuel: 0,
                    vehicleId: 0
                },
                selectedHudBlip: {
                    id: 0,
                    name: "",
                    coords: [],
                    sprite: -1
                },
                selectedHudBlipEditing: undefined
            }
            Object.entries(allItemDatas).forEach(([k, v]) => {
                let newWanted = wanted
                newWanted = newWanted.slice(0, newWanted.length-1)
                if (k.toLowerCase().includes(newWanted.toLowerCase())) return
                this[k] = v
            })
        },

        closeItemDetailsPage: function() {
            const allItemDatas = {
                selectedPlayer: {
                    name: "Lvorex Lvorex",
                    icon: "",
                    job: "",
                    id: 0,
                    uid: 0,
                    coords: "",
                    status: ""
                },
                selectedVehicle: {
                    plate: "",
                    coords: [],
                    label: "",
                    owner: "",
                    fuel: 0,
                    vehicleId: 0
                },
                selectedHudBlip: {
                    id: 0,
                    name: "",
                    coords: [],
                    sprite: -1
                },
                selectedHudBlipEditing: undefined
            }
            Object.entries(allItemDatas).forEach(([k, v]) => {
                this[k] = v
            })

            // const wantedItemDetail = document.getElementById(`mapItemDetails${wanted}`)
            // wantedItemDetail.style.display = "none"
            // wantedItemDetail.style.opacity = 0
        },

        changeToHudBlips: function() {
            this.removeAllBlips()

            this.mapHudBlips.forEach((hudBlip) => {
                const blip = L.marker([hudBlip.coords[1], hudBlip.coords[0]], {
                    icon: L.icon({
                        iconUrl: "img/HudBlipIcon.png",
                        iconSize: [25, 37],
                        iconAnchor: [25, 37]
                    })
                })

                const vm = this
                blip.on('click', function() {
                    if (vm.selectedHudBlip.id === hudBlip.id) {
                        vm.closeItemDetailsPage()
                        return
                    }
                    vm.selectedHudBlip = hudBlip
                    vm.openItemDetailsPage("HudBlips")
                })

                blip.addTo(this.map)
            })
            
            this.rightPanelCategory = "hudblips"
        },

        changeToVehicleBlips: function() {
            this.removeAllBlips()

            this.mapVehicleBlips.forEach((vehicle) => {
                const blip = L.marker([vehicle.coords[1], vehicle.coords[0]], {
                    icon: L.icon({
                        iconUrl: "img/VehicleBlipIcon.png",
                        iconSize: [22, 28],
                        iconAnchor: [22, 28]
                    })
                })

                const vm = this
                blip.on('click', function() {
                    if (vm.selectedVehicle.vehicleId === vehicle.vehicleId) {
                        vm.closeItemDetailsPage()
                        vm.selectedVehicle = {
                            plate: "",
                            coords: [],
                            label: "",
                            owner: "",
                            fuel: 0,
                            vehicleId: 0
                        }
                        return
                    }
                    vm.selectedVehicle = vehicle
                    vm.openItemDetailsPage("Vehicles")
                })

                blip.addTo(this.map)
            })

            this.rightPanelCategory = "vehicles"
        },

        changeToPlayerBlips: function() {
            this.removeAllBlips()

            this.mapPlayerBlips.forEach((player) => {
                const coords = player.coords.split(",")
                const marker = L.marker([coords[1], coords[0]], {
                    icon: L.icon({
                        iconUrl: player.playerBlip,
                        iconSize: [22, 28],
                        iconAnchor: [22, 28]
                    })
                })

                const vueVM = this
                marker.on('click', function() {
                    if (vueVM.selectedPlayer.id === player.id) {
                        vueVM.closeItemDetailsPage()
                        setTimeout(() => {
                            vueVM.selectedPlayer = {
                                name: "Lvorex Lvorex",
                                icon: "",
                                job: "",
                                id: 0,
                                coords: "",
                                status: ""
                            }
                        }, 200)
                        return
                    }
    
                    vueVM.openItemDetailsPage("Players")
                    vueVM.selectedPlayer = {
                        id: player.id,
                        uid: player.uid,
                        icon: player.icon,
                        playerColor: player.playerColor,
                        playerBlip: player.playerBlip,
        
                        name: player.name,
                        job: player.job,
                        status: player.status,
                        coords: player.coords,
                    }
                })

                marker.addTo(this.map)
            })

            this.rightPanelCategory = "players"
        },

        minimizeRightPanel: function() {
            if (this.rightPanelMinimized) {
                document.getElementById("map-categories-container").style.backgroundImage = ""
                document.getElementById("map-categories-container").style.height = ""
            } else {
                document.getElementById("map-categories-container").style.backgroundImage = "url(img/MapControlsListMinimizedBg.png)"
                document.getElementById("map-categories-container").style.height = "3.6111vh"
            }

            this.rightPanelMinimized = !this.rightPanelMinimized
        },

        selectPlayerFromRightPanel: function(id) {
            const player = this.mapPlayerBlips.find(player => player.id === id)

            if (this.selectedPlayer.id === player.id) {
                this.closeItemDetailsPage()
                this.selectedPlayer.id = 0
            } else {
                this.selectedPlayer = {
                    id: player.id,
                    uid: player.uid,
                    icon: player.icon,
                    playerColor: player.playerColor,
                    playerBlip: player.playerBlip,
    
                    name: player.name,
                    job: player.job,
                    status: player.status,
                    coords: player.coords,
                }
                this.openItemDetailsPage("Players")
                const coords = player.coords.split(",")
                this.map.setView([coords[1], coords[0]], 5)
            }
        },

        selectHudBlipFromRightPanel: function(id) {
            const hudblip = this.mapHudBlips.find(hudblip => hudblip.id === id)

            if (this.selectedHudBlip.id === hudblip.id) {
                this.closeItemDetailsPage()
                this.selectedHudBlip.id = 0
            } else {
                this.selectedHudBlip = hudblip
                this.map.setView([hudblip.coords[1], hudblip.coords[0]], 5)
            }
        },

        selectVehicleFromRightPanel: function(vehicleId) {
            const vehicle = this.mapVehicleBlips.find(vehicle => vehicle.vehicleId === vehicleId)

            if (this.selectedVehicle.vehicleId === vehicle.vehicleId) {
                this.closeItemDetailsPage()
                this.selectedVehicle.vehicleId = 0
            } else {
                this.selectedVehicle = vehicle
                this.openItemDetailsPage("Vehicles")
                this.map.setView([vehicle.coords[1], vehicle.coords[0]], 5)
            }
        },

        inspectSelectedUser: function() {
            location.href = "/Panel/Players/Info/#uid="+this.selectedPlayer.uid
        },

        inspectSelectedVehicle: function() {
            location.href = `/Panel/Players/Info/?vehicle=${this.selectedVehicle.plate}#uid=${this.selectedVehicle.owneruid}`
        },

        zoomInOrOut: function(toggle) {
            if (toggle === "in") {
                this.map.zoomIn()
            } else {
                this.map.zoomOut()
            }
        },

        changeMapStyle: function(map) {
            Object.entries(this.mapStyles).forEach(([key, data]) => {
                if (this.map.hasLayer(data)) {
                    this.mapStylesButtons.find(w => w.name === key).checked = false
                    this.map.removeLayer(data)
                }
            })  
            this.mapStylesButtons.find(w => w.name === map).checked = true
            this.mapStyles[map].addTo(this.map)
        }
    },
    mounted: async function() {
        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

        // Live Map Start

        const center_x = 117.3;
        const center_y = 172.8;
        const scale_x = 0.02072;
        const scale_y = 0.0205;

        const CUSTOM_CRS = L.extend({}, L.CRS.Simple, {
            projection: L.Projection.LonLat,
            scale: function(zoom) {
        
                return Math.pow(2, zoom);
            },
            zoom: function(sc) {
        
                return Math.log(sc) / 0.6931471805599453;
            },
            distance: function(pos1, pos2) {
                var x_difference = pos2.lng - pos1.lng;
                var y_difference = pos2.lat - pos1.lat;
                return Math.sqrt(x_difference * x_difference + y_difference * y_difference);
            },
            transformation: new L.Transformation(scale_x, center_x, -scale_y, center_y),
            infinite: true
        });

        const AtlasStyle = L.tileLayer("img/styleAtlas/{z}/{x}/{y}.jpg", {minZoom: 0,maxZoom: 5,noWrap: true,continuousWorld: false,attribution: 'CodeM - Atlas Map',id: 'styleAtlas map',})
        const SateliteStyle = L.tileLayer('img/styleSatelite/{z}/{x}/{y}.jpg', {minZoom: 0,maxZoom: 8,noWrap: true,continuousWorld: false,attribution: 'CodeM - Satelite Map',id: 'SateliteStyle map',})
        this.mapStyles = {
            "Atlas Map": AtlasStyle,
            "Satelite Map": SateliteStyle
        }

        const boundsTopLeft = CUSTOM_CRS.transformation.untransform(L.point([0, 0]));
        const boundsBottomRight = CUSTOM_CRS.transformation.untransform(L.point([250, 250]));
        
        const maxBounds = [
            [boundsTopLeft.y, boundsTopLeft.x],
            [boundsBottomRight.y, boundsBottomRight.x]
        ];

        const map = L.map("map", {
            crs: CUSTOM_CRS,
            minZoom: 3,
            maxZoom: 5,
            Zoom: 5,
            maxNativeZoom: 5,
            preferCanvas: true,
            layers: [SateliteStyle],
            center: [0, 0],
            zoom: 3,
            maxBounds: maxBounds,
            continuousWorld: true,
            worldCopyJump: false,
            maxBoundsViscosity: 0.95
        })

        map.zoomControl.remove()
        map.attributionControl.remove()

        const vueVM = this

        map.on('contextmenu', function(e) {
            const LatLng = [ e.latlng.lat, e.latlng.lng ]
            console.log(LatLng)
            vueVM.newBlipPopup = { name: '', sprite: null, coords: `${LatLng[1].toFixed()} ${LatLng[0].toFixed()} 0` }
        })

        this.map = map

        // Live Map End

        // Players Blips Get Start

        result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getPlayerCoordsAndCredentials.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)

        result.message.forEach(player => {
            const playerBlipIcons = ["img/PlayerBlipIcon.png|#39FF88", "img/PlayerBlipIconBlue.png|#5F5BFF", "img/PlayerBlipIconRed.png|#F88"]
            const randomInt = Math.floor(Math.random() * playerBlipIcons.length)
            const marker = L.marker([player.coords[1], player.coords[0]], {
                icon: L.icon({
                    iconUrl: playerBlipIcons[randomInt].split("|")[0],
                    iconSize: [22, 28],
                    iconAnchor: [22, 28]
                })
            })

            const remakedCoords = player.coords.map(coord => coord = parseInt(coord)).join(", ")

            this.mapPlayerBlips.push({
                id: player.id,
                uid: player.uid,
                icon: player.icon,
                playerColor: playerBlipIcons[randomInt].split("|")[1],
                playerBlip: playerBlipIcons[randomInt].split("|")[0],

                name: player.name,
                job: player.job,
                status: player.status,
                coords: remakedCoords,

                blip: marker
            })

            marker.on('click', function() {
                if (vueVM.selectedPlayer.id === player.id) {
                    vueVM.closeItemDetailsPage()
                    setTimeout(() => {
                        vueVM.selectedPlayer = {
                            name: "Lvorex Lvorex",
                            icon: "",
                            job: "",
                            id: 0,
                            coords: "",
                            status: ""
                        }
                    }, 200)
                    return
                }

                vueVM.openItemDetailsPage("Players")
                vueVM.selectedPlayer = {
                    id: player.id,
                    uid: player.uid,
                    icon: player.icon,
                    playerColor: playerBlipIcons[randomInt].split("|")[1],
                    playerBlip: playerBlipIcons[randomInt].split("|")[0],
    
                    name: player.name,
                    job: player.job,
                    status: player.status,
                    coords: remakedCoords,
                }
            })

            marker.addTo(map)
        })

        // Players Blips Get End

        // Vehicle Blips Get Start

        result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getAllVehicleCoordsAndCredentials.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.mapVehicleBlips = result.message

        // Vehicle Blips Get End

        // Hud Blips Get Start

        result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getScriptBlips.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.mapHudBlips = result.message

        // Hud Blips Get End

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