/**
 * Angucomplete
 * Autocomplete directive for AngularJS
 * By Daryl Rowland
 */

angular.module('angucomplete', [] )
    .directive('angucomplete', function ($parse, $http) {
    return {
        restrict: 'EA',
        scope: {
            "id": "@id",
            "placeholder": "@placeholder",
            "modelObject": "=ngModelObject",
            "autoCompeleteSearchStr" : "=ngModel",
            "url": "@url",
            "titleField": "@titlefield",
            "descriptionField": "@descriptionfield",
            "imageField": "@imagefield",
            "inputClass": "@inputclass",
            "userPause": "@pause",
            "loadDataFunc": "&loadDataFunc",
            "searchFields": "@searchfields",
            "minLengthUser": "@minlength"
        },
        /*
        template: '<div class="angucomplete-holder"><input id="{{id}}_value" ng-model="autoCompeleteSearchStr" \
            type="text" placeholder="{{placeholder}}" class="{{inputClass}}" ng-keyup="keyPressed($event)"/>\
            <div id="{{id}}_dropdown" class="angucomplete-dropdown" ng-if="showDropdown">\
            <div class="angucomplete-searching" ng-show="searching">Searching...</div>\
            <div class="angucomplete-searching" ng-show="!searching && (!results || results.length == 0)">No results found</div>\
            <div class="angucomplete-row" ng-repeat="result in results" ng-click="selectResult(result)" \
            ng-mouseover="hoverRow()" ng-class="{\'angucomplete-selected-row\': $index == currentIndex}">\
            <div ng-if="result.image && result.image != \'\'" class="angucomplete-image-holder">\
            <img ng-src="{{result.image}}" class="angucomplete-image"/></div>\
            <div>{{result.title}}</div>\
            <div ng-if="result.description && result.description != \'\'" class="angucomplete-description">{{result.description}}</div>\
            </div></div></div>',
            */
        template: '<div class="angucomplete-holder"><input id="{{id}}_value" ng-model="autoCompeleteSearchStr" \
            type="text" placeholder="{{placeholder}}" class="{{inputClass}}" ng-keyup="keyPressed($event)"/>\
            <div id="{{id}}_dropdown" class="angucomplete-dropdown" ng-if="showDropdown">\
            <div class="angucomplete-searching" ng-show="false">Searching...</div>\
            <div class="angucomplete-searching" ng-show="false">No results found</div>\
            <div class="angucomplete-row" ng-repeat="result in results" ng-click="selectResult(result)" \
            ng-mouseover="hoverRow()" ng-class="{\'angucomplete-selected-row\': $index == currentIndex}">\
            <div ng-if="result.image && result.image != \'\'" class="angucomplete-image-holder">\
            <img ng-src="{{result.image}}" class="angucomplete-image"/></div>\
            <div>{{result.title}}</div>\
            <div ng-if="result.description && result.description != \'\'" class="angucomplete-description">{{result.description}}</div>\
            </div></div></div>',
        controller: function ( $scope ) {
            $scope.lastFoundWord = null;
            $scope.currentIndex = null;
            $scope.justChanged = false;
            $scope.searchTimer = null;
            $scope.searching = false;
            $scope.pause = 500;
            $scope.minLength = 3;

            if ($scope.minLengthUser && $scope.minLengthUser != "") {
                $scope.minLength = $scope.minLengthUser;
            }

            if ($scope.userPause) {
                $scope.pause = $scope.userPause;
            }

            $scope.processResults = function(responseData) {
                if (responseData && responseData.length > 0) {
                    $scope.showDropdown = true;
                    $scope.results = [];

                    var titleFields = [];
                    if ($scope.titleField && $scope.titleField != "") {
                        titleFields = $scope.titleField.split(",");
                    }

                    for (var i = 0; i < responseData.length; i++) {
                        // Get title variables
                        var titleCode = "";

                        for (var t = 0; t < titleFields.length; t++) {
                            if (t > 0) {
                                titleCode = titleCode +  " + ' ' + ";
                            }
                            titleCode = titleCode + "responseData[i]." + titleFields[t];
                        }

                        // Figure out description
                        var description = "";

                        if ($scope.descriptionField && $scope.descriptionField != "") {
                            eval("description = responseData[i]." + $scope.descriptionField);
                        }

                        // Figure out image
                        var image = "";

                        if ($scope.imageField && $scope.imageField != "") {
                            eval("image = responseData[i]." + $scope.imageField);
                        }

                        var resultRow = {
                            title: eval(titleCode),
                            description: description,
                            image: image,
                            originalObject: responseData[i]
                        }

                        $scope.results[$scope.results.length] = resultRow;
                    }


                } else {
                    $scope.results = [];
                    $scope.showDropdown = false;
                }
            }

            $scope.searchTimerComplete = function(str) {
                // Begin the search
                if (str.length >= $scope.minLength) {
                    var localData = $scope.loadDataFunc();
                    if (localData) {
                        var searchFields = $scope.searchFields.split(",");

                        var matches = [];

                        for (var i = 0; i < localData.length; i++) {
                            var match = false;
                            for (var s = 0; s < searchFields.length; s++) {
                                var searchFieldValue = eval('localData[i].' + searchFields[s]);
                                if (localData[i] && searchFieldValue) {
                                    var evalStr = 'match = match || (localData[i].' + searchFields[s] + '.toLowerCase().indexOf("' + str.toLowerCase() + '") >= 0)';
                                    eval(evalStr);
                                }
                            }

                            if (match) {
                                matches[matches.length] = localData[i];
                            }
                        }

                        $scope.searching = false;
                        $scope.processResults(matches);
                        $scope.$apply();


                    } else {
                        $http.get($scope.url + str, {}).
                            success(function(responseData, status, headers, config) {
                                $scope.searching = false;
                                $scope.processResults(responseData);
                            }).
                            error(function(data, status, headers, config) {
                                console.log("error");
                            });
                    }
                }

            }

            $scope.hoverRow = function(index) {
                $scope.currentIndex = index;
            }

            $scope.keyPressed = function(event) {
                if (!(event.which == 38 || event.which == 40 || event.which == 13)) {
                    if (!$scope.autoCompeleteSearchStr || $scope.autoCompeleteSearchStr == "") {
                        $scope.showDropdown = false;
                    } else {
                        //$scope.model = $scope.autoCompeleteSearchStr;
                        if ($scope.autoCompeleteSearchStr.length >= $scope.minLength) {
                            //$scope.showDropdown = true;
                            $scope.currentIndex = -1;
                            $scope.results = [];

                            if ($scope.searchTimer) {
                                clearTimeout($scope.searchTimer);
                            }

                            $scope.searching = true;

                            $scope.searchTimer = setTimeout(function() {
                                $scope.searchTimerComplete($scope.autoCompeleteSearchStr);
                            }, $scope.pause);
                        }


                    }

                } else {
                    event.preventDefault();
                }
            }

            $scope.selectResult = function(result) {
                $scope.autoCompeleteSearchStr = result.title;
                $scope.modelObject = result;
                //$scope.autoCompeleteSearchStr = result.originalObject.name;
                $scope.showDropdown = false;
                $scope.results = [];
                //$scope.$apply();
            }
        },

        link: function($scope, elem, attrs, ctrl) {

            elem.bind("keyup", function (event) {
                if(event.which === 40) {
                    if (($scope.currentIndex + 1) < $scope.results.length) {
                        $scope.currentIndex ++;
                        $scope.$apply();
                        event.preventDefault;
                        event.stopPropagation();
                    }

                    $scope.$apply();
                } else if(event.which == 38) {
                    if ($scope.currentIndex >= 1) {
                        $scope.currentIndex --;
                        $scope.$apply();
                        event.preventDefault;
                        event.stopPropagation();
                    }

                } else if (event.which == 13) {
                    if ($scope.currentIndex >= 0 && $scope.currentIndex < $scope.results.length) {
                        $scope.selectResult($scope.results[$scope.currentIndex]);
                        $scope.$apply();
                        event.preventDefault;
                        event.stopPropagation();
                    } else {
                        $scope.results = [];
                        $scope.$apply();
                        event.preventDefault;
                        event.stopPropagation();
                    }

                } else if (event.which == 27) {
                    $scope.results = [];
                    $scope.showDropdown = false;
                    $scope.$apply();
                } else if (event.which == 8) {
                    $scope.modelObject = null;
                    $scope.$apply();
                }
            });


        }
    };
});