(function () {
    "use strict";
    angular.module('laz.videoLibrary')
        .component('videoLibrary', {
            controller: 'videoLibraryCtrl',
            templateUrl: '/shared/js/angular/video-library/video-library.html',
            bindings: {
                title: '@',
            }
        })
        .controller('videoLibraryCtrl', [ 'videos', '_', 'urlStateManager', '$anchorScroll',
            function(videos, _, urlStateManager, $anchorScroll) {
                var ctrl = this;

                var unsubscribeVideoChangeListener = null;

                ctrl.VIDEO_CATEGORY_HEADER_HEIGHT = 45;
                ctrl.VIDEO_LINK_CARD_HEIGHT = 92;

                ctrl.currentVideo = null;
                ctrl.videoCategories = [];

                ctrl.videoCategoryLoadStatus = "load";
                ctrl.currentVideoLoadStauts = "load";

                var unsubscribePopStateListener = null;

                ctrl.$onInit = function(){
                    loadCurrentVideo(videos.getCurrentVideoId());
                    unsubscribeVideoChangeListener = videos.onCurrentVideoChanged(loadCurrentVideo);
                    unsubscribePopStateListener = urlStateManager.onPop(function(state){
                        videos.setCurrentVideo(state.id);
                    });
                    loadVideoCategories();
                };

                ctrl.$onDestroy = function(){
                    if(unsubscribePopStateListener){
                        unsubscribePopStateListener();
                    }
                    if(unsubscribeVideoChangeListener){
                        unsubscribeVideoChangeListener();
                    }
                };

                ctrl.onLinkClick = function(videoCard){
                    $anchorScroll('videoLibrary');
                    var currentVideoId = ctrl.currentVideo && ctrl.currentVideo.id;
                    if(videoCard.id !== currentVideoId){
                        urlStateManager.push({ id: videoCard.id }, videoCard.siteLink);
                        videos.setCurrentVideo(videoCard.id);
                    }
                };

                function loadCurrentVideo(currentVideoIdAtTimeOfLoad){
                    console.debug("loadCurrentvideo " + currentVideoIdAtTimeOfLoad);
                    ctrl.currentVideoLoadStauts = "load";
                    videos.getCurrentVideo()
                        .then(function(video){
                            if(videos.getCurrentVideoId() === currentVideoIdAtTimeOfLoad){
                                if(!ctrl.currentVideo){
                                    urlStateManager.replace({ id: videos.getCurrentVideoId() });
                                }
                                ctrl.currentVideo = video;
                                ctrl.currentVideoLoadStauts = "ready";
                            }
                        })
                        .catch(function(err){
                            console.error(err);
                            if(videos.getCurrentVideoId() === currentVideoIdAtTimeOfLoad){
                                ctrl.currentVideoLoadStauts = "error";
                            }
                        });
                }

                function loadVideoCategories(){
                    ctrl.videoCategoryLoadStatus = "load";
                    videos.getVideoCardCategories()
                        .then(function(categories){
                            ctrl.videoCategories = mapVideoCategoriesToDisplayCategories(categories);
                            ctrl.videoCategoryLoadStatus = "ready";
                        })
                        .catch(function(err){
                            console.error(err);
                            ctrl.videoCategoryLoadStatus = "error"
                        });
                }

                function mapVideoCategoriesToDisplayCategories(categories){
                    var leftPixelHeight = 0;
                    var rightPixelHeight = 0;

                    return categories
                        .slice()
                        .sort(function(cat1, cat2){ return cat1.displayOrder - cat2.displayOrder; })
                        .map(function(category){
                            var isLeftAligned = leftPixelHeight <= rightPixelHeight;
                            if(isLeftAligned){
                                leftPixelHeight += category.videos.length * ctrl.VIDEO_LINK_CARD_HEIGHT;
                            } else {
                                rightPixelHeight += category.videos.length * ctrl.VIDEO_LINK_CARD_HEIGHT;
                            }
                            return angular.extend({}, category, {
                                alignment: isLeftAligned ? 'left' : 'right'
                            });
                        });
                }
            }]);
})();