function renkliYaziyiOlustur(yazi) {
    const renkKodlari = {
      "1": "#FF7272",
      "2": "#8BFF30",
      "3": "#B98826",
      "4": "#026E91",
      "5": "#2682A5",
      "6": "#7F4C98",
      "7": "white",
      "8": "#980000",
      "9": "#8A0448"
    };
  
    let renkliYazi = "";
    let renkKodu = "white";
    let i = 0;
  
    while (i < yazi.length) {
      if (yazi[i] === "^" && renkKodlari[yazi[i + 1]]) {
        renkKodu = renkKodlari[yazi[i + 1]];
        i += 2;
      } else {
        renkliYazi += `<span style="color: ${renkKodu}">${yazi[i]}</span>`;
        i++;
      }
    }
  
    return renkliYazi;
}

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

        notifyMenu: false,
        newNotify: false,

        consoleInput: "",
        cfxreStatusItems: [ // status: "operational" | "degraded_performance" | "partial_outage" | "major_outage"
            { name: "Keymaster", status: "operational" },
            { name: "Runtime", status: "operational" },
            { name: "IDMS", status: "operational" },
            { name: "CnL", status: "operational" },
            { name: "Policy", status: "operational" },
            { name: "Forums", status: "operational" },
            { name: "Server List Frontend", status: "operational" }
        ],
        consoleText: [],
        consoleToShowText: [],
        consoleRawToShowText: [],
        consoleHistory: [
            // { command: "ensure mAdmin", used: 0 }
        ],
        consoleAllHistory: [
            "refresh",
            "ensure mAdmin",
            "ensure mStaff"
        ],
        currentSwitchPosition: -1,

        announcementPopup: undefined
    },
    components : {
        "m-navbar": navbarComp,
        "left-navbar": leftNavbarComp
    },
    watch: {},
    methods: {
        switchBetweenHistories: function(toggle) {
            if (this.currentSwitchPosition === -1) {
                this.currentSwitchPosition = this.consoleAllHistory.length
            }

            if (toggle === "up") {
                if (this.consoleAllHistory[this.currentSwitchPosition-1]) {
                    this.currentSwitchPosition = this.currentSwitchPosition-1
                    this.consoleInput = this.consoleAllHistory[this.currentSwitchPosition]
                }
            } else {
                if (this.currentSwitchPosition === this.consoleAllHistory.length-1) {
                    this.consoleInput = ""
                    this.currentSwitchPosition = this.consoleAllHistory.length
                }

                if (this.consoleAllHistory[this.currentSwitchPosition+1]) {
                    this.currentSwitchPosition = this.currentSwitchPosition+1
                    this.consoleInput = this.consoleAllHistory[this.currentSwitchPosition]
                }
            }
        },

        downloadConsoleLogs: async function() {
            if (this.consoleRawToShowText.length === 0) return console.log("Console is empty.")

            let result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/downloadConsoleLogs.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    sentConsoleEntries: this.consoleRawToShowText
                })
            })
            result = await result.json()

            if (result.code !== 200) return console.log(result.message)
            const DateNow = result.message

            const downloadA = document.createElement("a")
            downloadA.setAttribute("download", `CodeMLiveConsoleLogs-${DateNow}`)
            downloadA.setAttribute("target", '_blank')
            downloadA.href = `${location.protocol}//${location.hostname}:${location.port}/Panel/LiveConsole/logs/${DateNow}.txt`
            const appDiv = document.getElementById("app")
            appDiv.appendChild(downloadA)
            downloadA.click()
            downloadA.remove()

            setTimeout(async () => {
                result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/unlinkConsoleLog.lvorex`, {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                        key: sha1(sessionStorage.getItem("uid-key")),
                        logId: DateNow
                    })
                })
                result = await result.json()
                if (result.code !== 200) return console.log(result.message)
            }, 15000)
        },

        makeAnnouncement: async function() {
            await fetch(`${location.protocol}//${location.hostname}:${location.port}/sendAnnouncement.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    message: this.announcementPopup.input
                })
            })

            this.announcementPopup = undefined
        },

        useShortcut: function(shortcut) {
            this.consoleInput = shortcut.command
            this.executeCommand()
        },

        executeCommand: async function() {
            await fetch(`${location.protocol}//${location.hostname}:${location.port}/sendConsoleCommandLiveConsole.lvorex`, {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    command: this.consoleInput
                })
            })

            const isCommandUsed = this.consoleHistory.findIndex(c => c.command === this.consoleInput)
            if (isCommandUsed !== -1) {
                this.consoleHistory[isCommandUsed].used = this.consoleHistory[isCommandUsed].used + 1
            } else {
                this.consoleHistory.push({ command: this.consoleInput, used: 1 })
            }
            this.consoleHistory.sort((a,b) => b.used - a.used)
            this.consoleAllHistory.push(this.consoleInput)
            this.currentSwitchPosition = this.consoleAllHistory.length

            this.consoleInput = ""
        },

        clearConsole: function() {
            this.consoleToShowText = []
        }
    },
    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

        result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getAllConsoleEntries.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(log => {
            const renkli = renkliYaziyiOlustur(log)
            this.consoleRawToShowText.push(log)
            this.consoleText.push(renkli)
        })

        this.consoleToShowText = this.consoleText

        setTimeout(() => {
            var liveConsoleTextArea = document.getElementById('live-console-text-area');
            liveConsoleTextArea.scrollTop = liveConsoleTextArea.scrollHeight;
        }, 100)

        setInterval(async () => {
            let updateResult = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getNewConsoleEntries.lvorex`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    key: sha1(sessionStorage.getItem("uid-key")),
                    sentConsoleEntries: this.consoleRawToShowText
                })
            })
            updateResult = await updateResult.json()
            if (updateResult.code !== 200) return console.log(updateResult.message)
            if (updateResult.message.length !== 0) {
                const toInsertMessage = []
                const toInsertRawMessage = []
                updateResult.message.forEach(log => {
                    toInsertRawMessage.push(log)
                    const renkli = renkliYaziyiOlustur(log)
                    toInsertMessage.push(renkli)
                })

                this.consoleText = this.consoleText.concat(toInsertMessage).reverse().slice(0, 100).reverse()
                this.consoleToShowText = this.consoleToShowText.concat(toInsertMessage).reverse().slice(0, 100).reverse()
                this.consoleRawToShowText = this.consoleRawToShowText.concat(toInsertRawMessage).reverse().slice(0, 100).reverse()

                setTimeout(() => {
                    var liveConsoleTextArea = document.getElementById('live-console-text-area');
                    liveConsoleTextArea.scrollTop = liveConsoleTextArea.scrollHeight;
                }, 10)
            }
        }, 1000)

        result = await fetch(`${location.protocol}//${location.hostname}:${location.port}/getCfxReStatus.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)
        Object.entries(result.message).forEach(([k,v]) => {
            this.cfxreStatusItems.find(c => c.name === k).status = v
        })

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