var addedPath;
var inputValue;
var item;
var itemCounter = 1;
var createdVideo;
// document.getElementById('add-multi-video').addEventListener('click', function addMultiVideo() {

// })


// Create a "close" button and append it to each list item
var myNodelist = document.querySelectorAll("#added-video-source li");

// for (i = 0; i < myNodelist.length; i++) {
// var span = document.createElement("SPAN");
// var txt = document.createTextNode("\u00D7");
// span.className = "close";
// span.appendChild(txt);
// myNodelist[i].appendChild(span);
// }

// // Click on a close button to hide the current list item
// var close = document.getElementsByClassName("close");
// for (i = 0; i < close.length; i++) {
//     close[i].onclick = function () {
//         var div = this.parentElement;

//         div.remove();

//     }
// }




// // Add a "checked" symbol when clicking on a list item
// var list = document.querySelector('ul');
// list.addEventListener('click', function (ev) {
//     if (ev.target.tagName === 'LI') {
//         ev.target.classList.toggle('checked');
//     }
// }, false);


document.getElementById('addVideoBtn').addEventListener('click', function() {
    createdVideo = document.createElement('video')
    createdVideo.setAttribute('id', 'videoPlayer' + itemCounter)
    createdVideo.setAttribute('controls', 'true');
    document.querySelector('.preview').innerHTML = ''
    document.querySelector('.preview').appendChild(createdVideo)

})




// Create a new list item when clicking on the "Add" button
function addVideoSource(addBtn) {

    if (addBtn == 'byPath') {
        inputValue = document.getElementById("myInput").value;
    } else if (addBtn == 'fromServer') {

        let serverVideos = document.getElementById("server-videos");
        let selectedItemIndex = document.getElementById("server-videos").selectedIndex;
        inputValue = serverVideos[selectedItemIndex].innerText

    }

    //Create SRC item in list and DOM
    if (inputValue === '') {
        alert("ابتدا مسیر تصویر را وارد کنید");
    } else {

        //Create SRC item in list
        var li = document.createElement("li");
        var t = document.createElement('span');
        t.innerText = inputValue
        li.appendChild(t);
        document.getElementById("added-video-source").appendChild(li);


        addSourcesToDom()
    }

    // document.getElementById("myInput").value = "";






    function addSourcesToDom() {

        //Create SRC item in HTML DOM
        let sourceNode = document.createElement('source')
        sourceNode.setAttribute('src', inputValue)
        document.getElementById('videoPlayer' + itemCounter).appendChild(sourceNode)
            // document.querySelector('video')
        addedPath = document.getElementById('videoPlayer' + itemCounter).children

        console.log('addedPath')
        console.log(addedPath)




    }




    //Create close btn in list
    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);



    // var addedPathCount = document.getElementById('added-video-source').children
    // var i;
    // for (i = 0; i < addedPathCount.length; i++) {
    //     addedVideoSource.push(addedPathCount[i].children[0].innerText)
    //     // console.log(addedPathCount[i].children[0].innerText)
    // }



    // var addedPath = document.querySelector('video')
    // var i;
    // for (i = 0; i < addedPath.children.length; i++) {
    //     addedVideoSource.push(addedPath.children[i].src)
    //     console.log(addedVideoSource)
    // }





    mltVideo('videoPlayer' + itemCounter)




    // Click on a close button to remove the current list item
    var close = document.getElementsByClassName("close");
    var div;
    for (i = 0; i < close.length; i++) {
        close[i].onclick = function() {
            div = this.parentElement;
            // div.style.display = "none";
            console.log("this")
            console.log(this)






            for (n = 0; n < addedPath.length; n++) {

                if (div.children[0].innerText == addedPath[n].src) {

                    addedPath[n].remove()

                }

            }


            // console.log(div.children[0].innerText)
            div.remove()
            mltVideo('videoPlayer' + itemCounter)
        }
    }
}



//add created preview to screen

document.getElementById('addVideo').addEventListener('click', function() {

    let videoToAdd = document.getElementById('videoPlayer' + itemCounter)

    videoToAdd.classList = 'draggable resize video';

    document.getElementById('screen').appendChild(videoToAdd)



    // console.log(itemCounter)


    //Remove added sources from list
    document.querySelector('#added-video-source').innerHTML = ''

    mltVideo('videoPlayer' + itemCounter)
    itemCounter++

    videoGraber()
})






function videoGraber() {
    document.querySelectorAll('video').forEach(item => {
        // console.log(item.id)
        mltVideo(item.id)

    })

}





////////////////////////
//multi video player
function mltVideo(itemCounter) {




    var i = 0; // global

    const videoCount = addedPath.length;
    let element = document.getElementById(itemCounter);

    function videoPlay(videoNum) {
        element.setAttribute("src", addedPath[videoNum].src);
        element.autoplay = true;
        element.load();
        element.play();
    }


    document.getElementById(itemCounter).addEventListener('ended', myHandler, false);
    console.log('itemCounter is: ' + itemCounter)

    videoPlay(0); // play the video

    function myHandler() {
        i++;
        if (i == videoCount) {
            i = 0;
            videoPlay(i);
        } else {
            videoPlay(i);
        }
    }


}