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);
}

// Add video layer - btn on menu bar
document.getElementById('addVideoBtn').addEventListener('click', function () {
    createdVideo = document.createElement('video')
    // console.log('52 itemCounter', itemCounter)
    createdVideo.setAttribute('id', 'videoPlayer' + itemCounter)
    // createdVideo.setAttribute('controls', 'false');
    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
    var li = document.createElement("li");
    if (inputValue === '') {
        alert("ابتدا مسیر تصویر را وارد کنید");
    } else {

        //Create SRC item in list


        let addeItem = document.createElement("input");
        addeItem.setAttribute('value', inputValue);
        addeItem.setAttribute('readonly', 'true')
        li.appendChild(addeItem);

        document.getElementById("added-video-source").appendChild(li);


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


        addSourcesToDom(inputValue)
    }

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


    //Removing Sources frome list (preview list)
    // =====================================>>>
    {

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

        // 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(addedPath.length)

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

                    // console.log(this.parentElement)
                    if (div.children[0].value == addedPath[n].src) {

                        addedPath[n].remove()

                    }

                }
                // console.log(div.children[0].innerText)
                div.remove()

                mltVideo('videoPlayer' + itemCounter)
            }
        }
    }
    //  <<<<==================================



    // add Sources To Dom
    function addSourcesToDom(inputValue) {

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

    // ####
    {
        // 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)

}



//add created preview to screen

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

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

    videoToAdd.classList = 'resize-drag video mltVideo';
        videoToAdd.style.width='30%';
        videoToAdd.style.height='30%';
               // videoToAdd.setAttribute('controls', 'true')
    document.getElementById('screen').appendChild(videoToAdd)

    // console.log(itemCounter)

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

    itemCounter++
    mltVideo('videoPlayer' + itemCounter)
    console.log('195 itemCounter is: ' + itemCounter)

    videoGraber()
})



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

    })

}


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

    // console.log('220 itemCounter is: ' + 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);


    videoPlay(0); // play the video

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


}