app.directive('ngSortable', function () {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attrs) {
            if ($attrs.ngSortable) {
                let ngSortable = $scope.$eval($attrs.ngSortable);
                let ngSortableReverse = angular.isDefined($attrs.ngSortableReverse) ? (!!$scope.$eval($attrs.ngSortableReverse)) : false;

                if (angular.isDefined(ngSortable)) {
                    if (ngSortable === true && angular.isDefined($scope.column) && angular.isDefined($scope.column.key)) {
                        ngSortable = $scope.column.key;
                    }

                    $scope.$watch('filter', function (newValue) {
                        if (newValue.predicate === ngSortable) {
                            if ($scope.filter.reverse) {
                                $element.removeClass('desc');
                                $element.addClass('asc');
                            } else {
                                $element.removeClass('asc');
                                $element.addClass('desc');
                            }
                        } else {
                            $element.removeClass('asc');
                            $element.removeClass('desc');
                        }
                    }, true);

                    if (angular.isString(ngSortable) && ngSortable.length > 0) {
                        $element.addClass('sorting');
                        $element.on('click', function () {
                            $scope.$apply(function () {
                                if ($scope.filter.predicate !== ngSortable)
                                {
                                    $scope.filter.predicate = ngSortable;
                                    $scope.filter.reverse = ngSortableReverse;
                                } else if ($scope.filter.predicate === ngSortable) {
                                    $scope.filter.reverse = !!!($scope.filter.reverse);
                                }
                            });
                        });
                    }
                }
            }
        }
    };
});