(function() {
    "use strict";

    angular.module("raz")
        .component('resourceSelection', {
            templateUrl: '/js/angular/resource-slider/resource-selection.html',
            controller: 'resourceSelection',
            bindings: {
                defaultId: '<',
                selectionOptions: '<',
                selectionType: '<',
                api: '<'
            }
        })
        .controller('resourceSelection', ['resourceCollectionService', '$element', '$document',
            function(resourceCollectionService, $element, $document) {

                var ctrl = this;
                var isOpen = false;

                ctrl.$onInit = function() {
                    ctrl.currentOptionId = ctrl.defaultId;
                };

                ctrl.$postLink = function() {
                    closeIfClickedOutsideSelection();
                };

                ctrl.openMenu = function() {
                    toggleMenu();
                    angular.element("#change-" + ctrl.selectionType + "-" + ctrl.defaultId).focus();
                };

                ctrl.getOptionName = function(id) {
                    for (var i= 0; i <= ctrl.selectionOptions.length; ++i) {
                        if (id == ctrl.selectionOptions[i].id) {
                            return ctrl.selectionOptions[i].name
                        }
                    }
                    return ctrl.selectionOptions[ctrl.defaultId];
                };

                ctrl.isOptionActive = function(id) {
                    if (ctrl.currentOptionId == id) {
                        return ' active';
                    } else {
                        return '';
                    }
                };

                ctrl.changeOption = function(id) {
                    resourceCollectionService.getResourceInfo(ctrl.api, id)
                        .then(function (response) {
                            ctrl.currentOptionId = id;
                            angular.element(".menu-dropdown-option").removeClass('active');
                            angular.element("#change-" + ctrl.selectionType + "-" + id).addClass('active');
                            angular.element("#current_" + ctrl.selectionType).focus();
                            toggleMenu();
                        });
                };

                var closeIfClickedOutsideSelection = function() {
                    var onDocumentMouseDown = function(event) {
                        var isChild = $element.find(event.target).length > 0;
                        if(!isChild && isOpen) {
                            toggleMenu();
                        }
                    };
                    $document.on("mousedown", onDocumentMouseDown);
                };

                var toggleMenu = function() {
                    isOpen = !isOpen;
                    angular.element("#" + ctrl.selectionType + "-select-nav").toggle();
                };

            }]);
})();