

function loadSearchView() {
    const searchList = getID("search-list") 
    const searchInput = getID("search-input")
    const playlistInfo = getID("playlist-info")

    loadSplash() 

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

        searchList.style.display = "flex"
        searchList.style.flexDirection = "column"
        searchList.innerHTML = loading(true)
        playlistInfo.innerHTML = ""

        if(searchInput.value != '') {
            searchResults(searchInput.value)
            
            if(searchInput.value.includes("https://") || searchInput.value.includes("http://")) {

                searchInput.value= ""
            }
        } else {
      
            loadSplash()
        }


    })

    function searchResults(data) {
      
            post("SEARCH", data).then((res) => {

                var songList = new Array()
                playlistInfo.innerHTML = ""

                if(res.playlist) {
                    console.log(res.results)
                    var author = ""
                    if(res.results.author) {
                        author = `
                        <div class='search-playlist-author'>
                        <img  class='search-playlist-author-img' src='${res.results.author.avatar_url}'>
                        <p class='search-playlist-author-name'>${res.results.author.name}</p>
                        </div>
                        `
                   }
                    playlistInfo.innerHTML = `
                    <div class='search-playlist'>
                        <div class='search-playlist-info'>
                            <div class='search-playlist-image'>
                                <img src='${res.results.thumbnail_url}' class='showPicture'>
                            </div>
                            <div class='search-playlist-div'>
                    
                                <p class='search-playlist-title'>${res.results.title}</p>
                                <div>
                                <p class='search-playlist-desc'>${res.results.videos.length} titres - ${res.results.view_count} vues </p>
                                <p class='search-playlist-desc'> ${res.results.description}</p>
                                </div>
                                ${author}
                            </div>
                        </div>
                        <div class='search-playlist-actions'>
                            <span id='sp-add' class='wh'><i class='fa fa-add'></i></span>
                            <span id='sp-play' class='wh'><i class='fa fa-play'></i></span>
                            <span id='sp-save' class='wh'><i class='fa fa-save'></i></span>
                        </div>
                    </div>
                    `

                    const spAdd = getID("sp-add")
                    const spPlay = getID("sp-play")
                    const spSave = getID("sp-save")

                    spAdd.addEventListener("click", () => {
                        post("FP_PLAY_PLAYLIST", res.results.url)
                    })

                    spPlay.addEventListener("click", () => {
                        post("FP_PLAY_PLAYLIST_NOW", res.results.url)
                    })

                    spSave.addEventListener("click", () => {
                        var pcdata = {
                            "name": res.results.title,
                            "source": "youtube",
                            "url": res.results.url
                        }
                        post("CREATE_PLAYLIST", pcdata)
                    })

                } 

                    searchList.innerHTML = ""
                    searchList.style.display = "grid"
                    
                    var allList = res.results.tracks

                    if(res.playlist) {
                        allList = res.results.videos
                    }
        
                    
                    for(var song of allList) {
                        var video = null
                        if(res.playlist) {
                            video = new VideoComponent(song, true)
                        } else {
                            video = new VideoComponent(song, false)
                        }
                        
                        
                        searchList.innerHTML += video.generateHTML()
                        songList.push(video)
                    }
        
                    if(allList.length == 0) {
                        searchList.style.display = "flex"
                        searchList.innerHTML = `<p class='search-no-song'>Aucun résultat pour "${searchInput.value}" !</p>`
                    }
        
                    for(var video of songList) {
                        video.loadScript()
                    }
                

            })
    
    }

    

    function loadSplash() {
        searchList.style.display = "flex"
        searchList.style.flexDirection = "column"

        get("README").then((res) => {   
            searchList.innerHTML = res
        })
    }
}

