/* The following lines are from the vimeo api
   See the link for complete reference
   https://github.com/vimeo/player.js/
*/

$(function() {

    var playList = []; // Variable to store all the state of the user played video

    // Check if the user already started to watch video and save state on browser close
    if(localStorage.getItem("playList") !== null) {
        playList = JSON.parse(localStorage.getItem("playList"));
        //console.log(playList);
    }
    
    function playNextVideo(id) {
        
        const list = $('#episode-lists')[0].children
        if(list.length > 1) {
            for(let i = 0; i<list.length; i++) {
                if($($(list[i].children[2]).find('button')[0]).val() == id) {
                    if(i < list.length-1) {
                        $($(list[i+1].children[2]).find('button')[0]).click()
                        break
                    }
                }
            }
        }

    }
    
    // Set the progress bar of the videos already watch on load
    setProgressBarOnLoad();

    function setProgressBarOnLoad () {
        if(playList.length !== 0) {
            var vids = JSON.parse(localStorage.getItem("playList"));
            vids.forEach(function(vid, index) {
                if(vid.status === 0) {
                    $(`#control${vid.id}`).html('<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 17 13" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9372 0L16.4004 1.47977L6.20039 12.75L0.000391006 6.47977L1.46359 5L6.20039 9.81553L14.9372 0Z" fill="#ffffff"/></svg> Vue')
                    $(`#${vid.id}`).attr("max",vid.duration);
                    $(`#${vid.id}`).attr("value",vid.duration);
                } else if(vid.status === 1) {
                    $(`#control${vid.id}`).text('Reprendre')
                    $(`#${vid.id}`).attr("max",vid.duration);
                    $(`#${vid.id}`).attr("value",vid.playingCurrentTime);
                }
                // if(Math.round(vid.playingCurrentTime) < Math.round(vid.duration)) {
                    
                // } else if(Math.round(vid.playingCurrentTime) >= Math.round(vid.duration) ){
                    
                // }
                else {
                    $(`#control${vid.id}`).text('Lire la vidéo')
                }
            });
        }
    }

    $('#video-player').css("border", "gray solid 1px")
    $('#video-player').css("background", "black")

    var playingStatus = 0
    var playingCurrentTime = 0
    var playingDuration = 0
    var buttonStatus = ''
    var currPlayed = '';

    const iframe = document.querySelector('iframe');
    const player = new Vimeo.Player(iframe);

    function checkScreenOnPlay () {
        if ($(window).width() < 768) {
            $('#overlay-content-btn').css('display', 'none');
        } else {
            $('#overlay-content-btn').css('display', 'none');
        }
    }

    function checkScreenOnPause () {
        if ($(window).width() < 768) {
            $('#overlay-content-btn').css('display', 'block');
        } else {
            $('#overlay-content-btn').css('display', 'none');
        }
    }

    player.on('play', function() {
        // checkScreenOnPlay();
        $('.mobile-overlay-video').addClass('d-none');
    });
    player.on('pause', function() {
        $('.mobile-overlay-video').removeClass('d-none');
    });

    // Main vimeo function on controls
    function synchronize(id, previousTime, duration) {

        const iframe = document.querySelector('iframe');
        const player = new Vimeo.Player(iframe);
        player.setLoop(false)
        player.on('play', function(data) {
            // checkScreenOnPlay();
            $('.mobile-overlay-video').addClass('d-none');
            // $(`#control${id}`).text('Reprendre')
        });

        buttonStatus = 1 // already played

        player.on('pause', function(data) {;
            // checkScreenOnPause();
            $('.mobile-overlay-video').removeClass('d-none');
            saveStateOnPause(id, data.seconds, data.duration, buttonStatus);
       
            if(buttonStatus !== 0) {
                $(`#control${id}`).text('Reprendre')
            }
            $(`#control${id}`).prop('disabled', false);
            $(`#control${id}`).removeAttr('data-toggle');
            $(`#control${id}`).removeAttr('data-placement');
            $(`#control${id}`).removeAttr('title');
        });

        player.on('ended', function(data) {
            $(`#control${id}`).html('<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 17 13" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9372 0L16.4004 1.47977L6.20039 12.75L0.000391006 6.47977L1.46359 5L6.20039 9.81553L14.9372 0Z" fill="#ffffff"/></svg> Vue')
            buttonStatus = 0 // Finish
            saveStateOnPause(currPlayed, playingCurrentTime, playingDuration, buttonStatus)
            //console.log('ended')
            playNextVideo(id)
        });
        
        currPlayed = id;
        
        player.ready().then(function() {
            if(previousTime !== 0) {
                if(duration != 0 && Math.floor(previousTime)< Math.floor(duration)) {
                    player.setCurrentTime(previousTime).then(function(seconds) {
                        player.play();
                        playingStatus = 1;
                    }).catch(function(error) {
                    console.log(error)
                    });
                } else {
                    player.play();
                    playingStatus = 1;    
                }
            } else {
                player.play();
                playingStatus = 1;
            }
            
            player.on('playing', function(data) {
                $(`#${id}`).attr("max",data.duration);
                playingDuration = data.duration;
                //console.log(data.duration)
            });

            // player.getDuration().then(function(duration) {
            //     $(`#${id}`).attr("max",duration);
            //     playingDuration = duration;
            // }).catch(function(error) {
            //     console.log(error);
            // });

            function checkProgress () {
                player.getCurrentTime().then(function(seconds) {
                    $(`#${id}`).attr("value",seconds);
                    playingCurrentTime = seconds;
                }).catch(function(error) {
                    console.log(error)
                });
            }

            function saveStateEvery2Sec() {
                saveStateOnPause (currPlayed, playingCurrentTime, playingDuration, buttonStatus)
            }

            setInterval(checkProgress, 500)

            setInterval(saveStateEvery2Sec, 500)

        });
    }

    // Save State when pause
    function saveStateOnPause (id, playingCurrentTime, playingDuration, buttonStatus) {

        if(playList.length === 0 ) {
            playList.push({id: id, playingCurrentTime: playingCurrentTime, duration: playingDuration, status: buttonStatus})
            localStorage.setItem("playList", JSON.stringify(playList));
        }

        if(playList.length > 0) {
            var vids = JSON.parse(localStorage.getItem("playList"))
            var found = false
            for (var i in vids) {
                if (vids[i].id == id) {
                    playList[i].playingCurrentTime = playingCurrentTime;
                    playList[i].duration = playingDuration;
                    playList[i].status = buttonStatus;
                    localStorage.setItem("playList", JSON.stringify(playList));
                    found = true
                    break; //Stop this loop, we found it!
                }
            }
            if(found === false) {
                playList.push({id: id, playingCurrentTime: playingCurrentTime, duration: playingDuration, status: buttonStatus})
                localStorage.setItem("playList", JSON.stringify(playList));
            }
        }
      
    }
    // Execute this event when playing the first video on the player itself
    player.on('play', function(data) {
        previousTime = 0;
        if(playList.length === 0 ) {
            // checkScreenOnPlay();
            $('.mobile-overlay-video').addClass('d-none');
            var id = $(".control" ).first().attr("value");
            synchronize(id,previousTime,0);
        }
        if(playList.length > 0) {
            var id = $(".control" ).first().attr("value");
            var vids = JSON.parse(localStorage.getItem("playList"))
            var found = false
            for (var i in vids) {
                if (vids[i].id == id) {
                    previousTime = vids[i].playingCurrentTime
                    found = true
                    synchronize(id, previousTime, vids[i].duration)
                    break; //Stop this loop, we found it!
                }
            }
            if(found === false) {
                synchronize(id, previousTime, 0)
            }
        } else {
            synchronize(id, previousTime, 0)
        }
    });

    // Execute play when overlay button is click
    $('#overlay-content-btn').click(function() {
        const iframe = document.querySelector('iframe');
        const player = new Vimeo.Player(iframe);
        player.play();
        // checkScreenOnPlay();
        $('.mobile-overlay-video').addClass('d-none');
    });

    // Execute play when overlay button is click
    $('#pause-btn').click(function() {
        const iframe = document.querySelector('iframe');
        const player = new Vimeo.Player(iframe);
        player.pause();
        // checkScreenOnPlay();
        $('.mobile-overlay-video').removeClass('d-none');
    });

    // Execute play when overlay button is click
     player.on('pause', function(data) {;
        // $checkScreenOnPause();
        $('.mobile-overlay-video').removeClass('d-none');
    });
    

    // Execute this event when playing the first video on the player itself
    // player.on('ended', function(data) {
    //     if(currPlayed === '') {
    //         var id = $(".control" ).first().attr("value");
    //         $(`#control${id}`).html('<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 17 13" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9372 0L16.4004 1.47977L6.20039 12.75L0.000391006 6.47977L1.46359 5L6.20039 9.81553L14.9372 0Z" fill="#ffffff"/></svg> Vue')
    //         $(`#control${id}`).prop('disabled', false);
    //         $(`#control${id}`).removeAttr('data-toggle');
    //         $(`#control${id}`).removeAttr('data-placement');
    //         $(`#control${id}`).removeAttr('title');

    //         synchronize(id);
    //     }
    // });
    function get_selected_video (id, counter) {
        $.ajax({
            url: baseurl+"events/homepage/get_event_video?id="+id,
            type: "get",
            success: function( result ){
                if(result.mtype == 'success') {
                    $('#video-player').empty()
                    $('#video-player').append(JSON.parse(result.mdata.embed))
                    $('#episode_number').text(counter)
                    $('#episode_title').text(result.mdata.title)
                    previousTime = 0;

                    if(playList.length !== 0) {
                        var vids = JSON.parse(localStorage.getItem("playList"))
                        var found = false
                        for (var i in vids) {
                            if (vids[i].id == id) {
                                previousTime = vids[i].playingCurrentTime
                                found = true
                                synchronize(id, previousTime, vids[i].duration)
                                break; //Stop this loop, we found it!
                            }
                        }
                        if(found === false) {
                            synchronize(id, previousTime, 0)
                        }
                    } else {
                        synchronize(id, previousTime, 0)
                    }

                }
            
            }
        });
    }
        // Check the currently video played status (main)  
        $('.control').click(function() {
  
            var id = $(this).attr("value");
            var counter = $(this).attr("count");
            var btnText = $(this).text();

            // If the user finish the video and want to watch again reset state
            if (btnText !== 'Lire la vidéo' && btnText !== 'Reprendre') {
                $("html, body").animate({ scrollTop: 0 }, 500);
                $(`#control${id}`).prop('disabled', true);

                $(`#control${id}`).prop('data-toggle', 'tooltip');
                $(`#control${id}`).prop('data-placement', 'top');
                $(`#control${id}`).prop('title', 'Video already playing');

                get_selected_video(id, counter)
            }

            if(currPlayed !== id) {
                const iframe = document.querySelector('iframe');
                const player = new Vimeo.Player(iframe);
                player.pause();
            }
            
            if (btnText === 'Lire la vidéo') {
                $("html, body").animate({ scrollTop: 0 }, 500);

                $(`#control${id}`).prop('disabled', true);

                $(`#control${id}`).prop('data-toggle', 'tooltip');
                $(`#control${id}`).prop('data-placement', 'top');
                $(`#control${id}`).prop('title', 'Video already playing');


                get_selected_video(id, counter)
            }

            if (btnText === 'Reprendre' && currPlayed !== id) {
                
                $("html, body").animate({ scrollTop: 0 }, 500);

                get_selected_video(id, counter)
            }
            
            // Run this when user click on the same video and try to pause
            if (btnText === 'Reprendre'  && currPlayed === id) {

                $("html, body").animate({ scrollTop: 0 }, 500);
                
                const iframe = document.querySelector('iframe');
                const player = new Vimeo.Player(iframe);
                player.play();
                playingStatus = 1;
            }

        })

  });