/* 
 * -------------------
 * PH Video Page JS
 * Author: Jack Lyons
 * -------------------
 */
(function($, window, document) {

    jQuery(document).ready(function($) {
        
        var innerWrapper    = $('.inner-main-wrapper'),
            resultsWrapper  = $('#results'),
            togglePlaylists = $('#toggle-video-playlists'),
            featureVideoId  = $('.youtube-player').data('id'),
            searchForm      = $('#search-form'),
            q; // query

       /* ----------------------
        * YT Video Constructor
        * ---------------------- */
        var VideoConstructor = (function () {

            return {
              
              speedUpYouTubeLoad: function (el) {
                
                var div, n, v = document.getElementsByClassName(el);
                // Iterate over videos and create thumbnail
                for (n = 0; n < v.length; n++) {
                  div = document.createElement("div");
                  div.setAttribute("data-id", v[n].dataset.id);
                  div.innerHTML = this.addThumb(v[n].dataset.id);
                  div.onclick = this.addIframe;
                  v[n].appendChild(div);
                  
                }
              },
              
              addThumb: function (id) {
                
                var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
                    play  = '<div class="play"></div>';
                return thumb.replace("ID", id) + play;
                
              },
              
              addIframe: function () {
                
                var iframe = document.createElement("iframe");
                var embed  = "https://www.youtube.com/embed/ID?autoplay=1";
                iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
                iframe.setAttribute("frameborder", "0");
                iframe.setAttribute("allowfullscreen", "1");
                this.parentNode.replaceChild(iframe, this);
                
              },
 
              init: function(el) {
                
                return this.speedUpYouTubeLoad(el);
                
              }
            }; /* -- end return {} -- */

          })(); /* ------ end VideoConstructor ---- */

          
         /* --------------
          * Ajax Requests
          * -------------- */
          var AjaxRequests = (function () {
            
            var options = {
              part: 'snippet, id',
              maxResults: 9,
              type: 'video',
              key: 'AIzaSyDKJYxyWUDZhykA8DUVOorUbmC7J7QAAUg'
            };

            var commentsOptions = {
              part: 'snippet',
              videoId: featureVideoId,
              key: 'AIzaSyDKJYxyWUDZhykA8DUVOorUbmC7J7QAAUg'
            }

            return {
              
              searchChannel: function() {
                
                q = $('#query').val(); // Get Form Input
                Templates.createHTMLWrapper(q);
                
                AjaxRequests.channelRequest("https://www.googleapis.com/youtube/v3/search", 
                  $.extend({}, options, { 
                    q: q,
                    channelId: 'UCLhwHoIKtoWBccOFPDmEFpQ' 
                  })
                );
                
              },

              returnPlaylistVideos: function(e) {
                
                var playlistId    = e.currentTarget.dataset.channelId,
                    playlistTitle = e.target.innerText;
                
                Templates.createHTMLWrapper(playlistTitle);
                
                $.get(
                  "https://www.googleapis.com/youtube/v3/playlistItems", 
                   $.extend({}, options, {
                     q: playlistTitle,
                     playlistId: playlistId,
                   }),
                  
                  function(data) {
                    q = playlistTitle;
                    Templates.appendYouTubeData(data, playlistTitle, function(item) {
                      return item.snippet.resourceId.videoId; // Append HTML from different endpoint
                    }); 
                  });
                
              },

              getFeatureVideoComments: function() {
                
                $.get("https://www.googleapis.com/youtube/v3/commentThreads", commentsOptions, 
                function(data) {

                  Templates.appendFeatureComments(data);

                })
                
              },
              
              getNextPageItems: function() {
                
                var token = $('#next-button').data('token'),
                        q = $('#next-button').data('query');

                $('#buttons').html('');
               
                AjaxRequests.channelRequest("https://www.googleapis.com/youtube/v3/search",   
                  $.extend({}, options, { 
                    q: q,
                    channelId: 'UCLhwHoIKtoWBccOFPDmEFpQ',
                    pageToken: token
                  })
                );
                
              },

              channelRequest: function(url, args) {
                $.get(url, args, function(data) { 
                  Templates.appendYouTubeData(data, q, function(item) { 
                    return item.id.videoId; 
                  });
                });
              }
            }; /* -- end return {} -- */
            
          })(); /* ------ AjaxRequests ---- */

         

     /* -----------------
      * Return ajax data
      * ----------------- */
      var Templates = (function () {

        var visible = false;
            
        return {
          
            appendYouTubeData: function (data, query, videoId) {  

              Templates.appendEachVideo(data, videoId); // Iterate over each video & append HTML
              Templates.appendNextButton(data); 
              VideoConstructor.init("youtube-player");

            },

            appendFeatureComments: function(data) {
              // only append comments once
              if (!visible) {
                $.each(data.items, function(i, comment) {
                  var comment = comment.snippet.topLevelComment.snippet.textDisplay;
                  $('.comment-item').append('<p>' + comment + '</p>');
                  console.log(comment);
                })
              }
              
              visible = true;
              // slide comments down and up
              $('.comment-item')
                .slideToggle()
                .show();
              // toggle up and down arrows
              $('.js-reveal-comments').find(".fa-angle-up, .fa-angle-down").toggle();

            },

            appendEachVideo: function (videos, videoId) {

              $.each(videos.items, function(i, item) {
                var output = Templates.getOutput(item, videoId(item));
                $('#results').append(output);
              });

            },

            appendNextButton: function(data) {

              var nextPageToken = data.nextPageToken,
                  nextButton    = Templates.getButtons(nextPageToken),
                  buttonsDiv    = $('#buttons');

                  if (nextPageToken === undefined) {
                    $(buttonsDiv).html('<h2 class="grey-color text-lead in-b pad-r-sm">NO MORE VIDEOS</h2>');
                  } else {
                    $(buttonsDiv).html(nextButton); 
                    $('#next-button').on('click', AjaxRequests.getNextPageItems);
                  }
              
            },

            createHTMLWrapper: function (title) {

              $(innerWrapper)
                .html('')
                .append(
                  '<div class="text-center"><h2>Results for: ' + title + '</h2></div>' +
                  '<div id="results" class="row flex-wrap video-row w-95 m-auto"></div>' +
                  '<div id="buttons" class="text-center"></div>'
              );

            },

            getOutput: function(item, videoId) {

              var title  = item.snippet.title;
              var output = 
                '<div class="video-row__item">' +
                  '<div class="embed-container">' +
                    '<div class="youtube-player" data-id="' + videoId + '"></div>' +
                  '</div>' +
                  '<div class="list-right">' +
                    '<h4 class="text-bold"><a class="no-link-style black-color" href="https://www.youtube.com/embed/' + videoId + '">' + title + '</a></h4>' +
                '</div>';
              return output;

            },

            getButtons: function (nextPageToken) {

              var btnOutput = 
                '<div class="button-container text-center">' +
                  '<a id="next-button" class="no-link-style grey-color"' +
                     'data-query="' + q + '" data-token="' + nextPageToken + '">' + 
                      '<h2 class="text-lead in-b pad-r-sm">VIEW MORE VIDEOS</h2>' +
                      '<i class="fa fa-2x fa-angle-down p-0" aria-hidden="true"></i>' +
                  '</a>' + 
                '</div>';
              return btnOutput;

            }
          
        }; /* -- end return {} -- */
        
      })(); /* ------ Templates ---- */

     /* ------------
      * Run on init
      * ------------ */
      $('.video-list').on('click', 'li', AjaxRequests.returnPlaylistVideos); 
      $('.js-reveal-comments').on('click', AjaxRequests.getFeatureVideoComments);


      $(searchForm).submit(function(e) {
        e.preventDefault();
        $(innerWrapper).html('');
        AjaxRequests.searchChannel();
      });

      $(togglePlaylists).on('click', function() {
        $('.video-list').toggle();
      });

      VideoConstructor.init("youtube-player");

    }); // end $(document).ready()

}(window.jQuery, window, document));