const {ipcRenderer} = require("electron");
const ipc = ipcRenderer;
const fs = require("fs")
const packageJson = require("../../package.json")

const logo = document.getElementById("logo")
const username = document.getElementById("username")
const signout = document.getElementById("signout")
const onlineNumber = document.getElementById("online")
const closeBtn = document.getElementById("closeBtn");
const minimizeBtn = document.getElementById("minimizeBtn");
const musicTitle = document.getElementById("music_title")
const musicURL = document.getElementById("music_img")
const exitSpan = document.getElementById("exitSpan")
const list = document.getElementById("list")
const listDialog = document.getElementById("listDialog")
const listClose = document.getElementById("listClose")
const listClear = document.getElementById("listClear")
const listcontent = document.getElementById("listContent")

const search = document.getElementById("search")
const searchBar = document.getElementById("searchBar")
const searchDialog = document.getElementById("searchDialog")
const searchClose = document.getElementById("searchClose")
const searchcontent = document.getElementById("searchContent")

listClear.addEventListener("click", () => {
    
    ipc.send("listClear")

})

searchBar.addEventListener("change", () => {

    ipc.send("findReq", searchBar.value)


})

ipc.on("findResult", (ev, list) => {

 
    if(list.tracks != null) {
        const data = list.tracks
     

        var contentToPush = new Array()

        for(var title of data) {
            
          
            contentToPush.push(' <div class="song"> <img class="thumbnail" src="' + title.thumbnail + '"><div class="titleSong"> <p class="searchTitle">' + title.title + '</p></div> <button id="' + data.indexOf(title) + '_add" class="buttonReduce"><i class="fa fa-plus"></i></button> </div>')
        }

        if(contentToPush.join("") == "") {

            searchcontent.innerHTML = '<p class="error">Aucun morceau trouvé !</p>'
        
        } else {

            searchcontent.innerHTML = contentToPush.join("")
        }

        for(var title of data) {

     
            
            const titleBtn = document.getElementById(data.indexOf(title)+ "_add")
            
            titleBtn.addEventListener("click", () => {
                searchDialog.close()
                searchcontent.innerHTML = ""
                searchBar.value = ""
                ipc.send("addQueue", data[titleBtn.id.replace("_add", "")].uri)
            })
        }
       

    } else {

        searchcontent.innerHTML = '<p class="error">Aucun morceau trouvé !</p>'

    }

})

list.addEventListener("click", () => {

    listDialog.showModal()

})

listClose.addEventListener("click", () => {

    listDialog.close()
})


search.addEventListener("click", () => {

    searchDialog.showModal()

})

searchClose.addEventListener("click", () => {

    searchDialog.close()
})




const backward = document.getElementById("backward")
const play = document.getElementById("play")
const forward = document.getElementById("forward")

ipc.send("askUpdateState")

document.getElementById("version").innerHTML = packageJson.version

closeBtn.addEventListener("click", () => {
   
    ipc.send("close");
    
});

minimizeBtn.addEventListener("click", () => {

    ipc.send("minimize")
})

play.addEventListener("click" ,() => {

    ipc.send("play")
    console.log("PLAY")

})

backward.addEventListener("click" ,() => {

    ipc.send("backward")
    console.log("BACKWARD")
    
})

forward.addEventListener("click" ,() => {

    ipc.send("forward")
    console.log("FORWARD")
    
})

ipc.on("actualize", (ev, data) => {
    console.log(data)
    onlineNumber.innerHTML = data.onlineNumber

    if(data.playing == 1) {
        play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-pause"></i>'

    } else {

        play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-play"></i>'
    }

    if(data.isOnline == true) {

        exitSpan.innerHTML = ' <button id="exit" class="third-leave"><i class="fa fa-phone-slash"></i></button>'
        
        const exit = document.getElementById("exit")

        exit.addEventListener("click", () => {

            ipc.send("exitBot")

        })
    } else {

        exitSpan.innerHTML = ""
    }

    

    if(data.queue != null) {

        var contentToPush = new Array()

        for(var title of data.queue) {
            
            console.log(data.queue.indexOf(title) + " - " + title.title)
            contentToPush.push(' <div class="song"> <img class="thumbnail" src="' + title.thumbnail + '"><div class="titleSong"> <p class="listTitle">' + title.title + '</p></div> <button id="' + data.queue.indexOf(title) + '_delete" class="buttonClose"><i class="fa fa-trash"></i></button> </div>')
        }

        if(contentToPush.join("") == "") {

            listcontent.innerHTML = '<p class="error">Aucun morceau dans la liste de lecture !</p>'
        
        } else {

            listcontent.innerHTML = contentToPush.join("")
        }

        for(var title of data.queue) {

            console.log(data.queue.indexOf(title) + " - " + title.title)
            
            const titleBtn = document.getElementById(data.queue.indexOf(title)+ "_delete")
            
            titleBtn.addEventListener("click", () => {

                ipc.send("deleteQueue", titleBtn.id.replace("_delete", ""))
            })
        }
       

    } else {

        listcontent.innerHTML = '<p class="error">Aucun morceau dans la liste de lecture !</p>'

    }

    if(data.current == null) {

        musicURL.innerHTML = '<img class="thumbnail" src="../common/Mediamodifier-Design.svg">'
        musicTitle.innerHTML = "Aucun titre joué"
    } else {

        musicURL.innerHTML = '<img class="thumbnail" src="' + data.current.thumbnail + '">'
        musicTitle.innerHTML = data.current.title
    }
})

ipc.on("updateData", (ev, data) => {

    
    username.innerHTML = data.username
    logo.innerHTML = "<img class='logo' src='https://cdn.discordapp.com/avatars/" + data.id + "/" + data.avatar + ".png'>"

})

signout.addEventListener("click", () => {
    ipc.send("signout")

})