(function () {
    'use strict';
    var app = angular.module('toolbars');
    var templatePath = modulesSharedResourcesUrl + 'Modules/Toolbars/Views/';

    // A directive to display a search box within a toolbar
    app.directive('toolbarSearchBar', function () {
        return {
            restrict: 'E',
            require: 'ngModel',
            scope: {
                label: '=',
                placeholder: '=',
                ngModel: '=',
                ngChange: '=',
                labelClass: '='
            },
            templateUrl: templatePath + 'search-bar.html',
            link: function (scope) {

                scope.placeholder = scope.placeholder || "Search";
            }
        }
    });

    // A directive to display a select control
    app.directive('toolbarSelectControl', function () {
        return {
            restrict: 'E',
            scope: {
                label: '=',
                selected: '=',
                options: '=',
                labelClass: '='
            },
            templateUrl: templatePath + 'select-control.html',
            link: function (scope) {

                scope.rand = Math.random();
            }
        }
    });

    // A directive to display an order control (select control with a flip order direction button)
    app.directive('toolbarOrderControl', function () {
        return {
            restrict: 'E',
            scope: {
                label: '=',
                selected: '=',
                options: '=',
                enableDirectionChange: '='
            },
            templateUrl: templatePath + 'order-control.html',
            link: function (scope) {

                if (typeof scope.enableDirectionChange == "undefined") {
                    scope.enableDirectionChange = true;
                }
            }
        }
    });

    // A directive to render a flip direction button
    app.directive('toolbarFlipDirectionButton', function () {
        return {
            restrict: 'E',
            scope: {
                className: '@',
                small: '=',
                value: '=',
                title: '@'
            },
            transclude: true,
            templateUrl: templatePath + 'flip-dir-button.html',
            link: function (scope) {

                scope.title = scope.title || "Change order direction to " + (scope.value.reverse ? 'ascending' : 'descending');

                // Flip the order direction
                scope.flipOrderDirection = function () {
                    scope.value.reverse = !scope.value.reverse;
                }
            }
        };
    });

    // A directive for a toggle button
    app.directive('toggleButton', function () {
        return {
            restrict: 'E',
            scope: {
                isToggled: '=',
                activeText: '=',
                activeIcon: '=',
                inactiveText: '=',
                inactiveIcon: '=',
                toggleFn: '=',
                title: '=',
                activeTitle: '=',
                inactiveTitle: '='
            },
            template: '<button title="{{ ariaTitle }}" aria-label="{{ ariaTitle }}" class="btn btn-dark" ng-click="toggleFn()" ng-disabled="ngDisabled">' +
                '<i class="fa fa-{{ isToggled ? inactiveIcon : activeIcon }} fa-fw" /><span class="hidden-xs hidden-sm"> {{ isToggled ? inactiveText : activeText }}</span>' +
                '</button>',
            link: function (scope) {

                scope.$watch('isToggled', function () {
                    scope.ariaTitle = scope.title
                        || (
                            scope.isToggled
                                ? scope.inactiveTitle || scope.inactiveText
                                : scope.activeTitle || scope.activeText
                        );
                });

                scope.activeIcon = scope.activeIcon || 'indent';
                scope.inactiveIcon = scope.inactiveIcon || 'outdent';
            }
        };
    });

    // A directive to render table headers
    app.directive('orderableHeaders', function () {
        return {
            restrict: 'A',
            scope: {
                tableHeaders: '=orderableHeaders',
                currentOrder: '=',
                orderOptions: '=',
            },
            templateUrl: templatePath + 'orderable-headers.html',
            link: function (scope) {

                scope.setOrder = function (index) {
                    if (scope.currentOrder.name != scope.orderOptions[index].name) {
                        scope.currentOrder = scope.orderOptions[index];

                        // When the button is clicked, the order direction is unintentionally flipped,
                        // so we need to flip it back here when the order is changed.
                        scope.currentOrder.value.reverse = !scope.currentOrder.value.reverse;
                    }
                }

                scope.orderDirectionTitleText = function (header, index) {
                    return scope.currentOrder.name == header.name
                        ? (
                            scope.currentOrder.value.reverse
                                ? 'ascending'
                                : 'descending'
                        )
                        : (
                            scope.orderOptions[index].value.reverse
                                ? 'descending'
                                : 'ascending'
                        );
                }
            }
        };
    });

})();