(function() {
    'use strict';

    angular.module('shared')

        .component('slidePane', {
            templateUrl: '/shared/js/angular/ui/slide-pane/slide-pane.html',
            transclude: true,
            controller: 'SlidePaneController',
            bindings: { scrollModel: '<' }
        })

        .controller('SlidePaneController', ['$scope', function($scope) {
            var ctrl = this;
            ctrl.items = [];

            ctrl.getArrowClasses = function() {
                return {
                    'no-left-arrow': ctrl.scrollModel && !ctrl.scrollModel.canScrollLeft,
                    'no-right-arrow': ctrl.scrollModel && !ctrl.scrollModel.canScrollRight
                }
            };

            ctrl.scrollEvent = function(type, direction) {
                var event = { type: type, direction: direction };
                this.scrollModel.onScrollChange(event);
            };

            ctrl.getStyle = function() {
                if (ctrl.items.length === 0) {
                    return {
                        left: ctrl.scrollModel.displayOffset + "px"
                    }
                }
                return {};
            };

            ctrl.addItem = function(slidePaneItem) {
                ctrl.items.push(slidePaneItem);
            };

            $scope.$watch('$ctrl.scrollModel.displayList', function (displayList, oldDisplayList) {
                if (ctrl.items.length === 0) return;
                var itemsOffScreen = oldDisplayList.filter(function(item) {
                    return (displayList.indexOf(item) === -1);
                });
                displayList.forEach(function(item, index) {
                    var i = ctrl.scrollModel.getItems().indexOf(item);
                    ctrl.items[i].updateDisplay(index);
                });
                itemsOffScreen.forEach(function(item) {
                    var i = ctrl.scrollModel.getItems().indexOf(item);
                    ctrl.items[i].updateDisplay(-1);
                });
            });

            $scope.$watch('$ctrl.scrollModel.displayOffset', function(offset) {
                if (ctrl.items.length === 0) {
                    return;
                }
                var displayList = ctrl.scrollModel.displayList;
                displayList.forEach(function(item) {
                    var i = ctrl.scrollModel.getItems().indexOf(item);
                    ctrl.items[i].updateDisplayOffset(offset);
                });
            });
        }])
})();