(function () {
    'use strict';

    angular
        .module('app')
        .directive('filtroDirective', filtroDirective);

    function filtroDirective($timeout, $filter, DataFormated) {
        var directive = {
            restrict: 'AE',
            replace: true,
            link: link,
            templateUrl: urlGlobal + 'ViewsAngular/Terminais/Util/filtro/filtro.html',
            scope: false
            //scope: {
            //    controller: '='
            //}
        }

        return directive;

        function link(scope, element, attrs) {
            //////////////////////////// Eventos de interação na interface /////////////////////////////////////
            //scope.$watch('vm.currentFilter.searchText', function changeSearh(newValue, oldValue) {
            //    // Chama o custom filter (filterDefault) a partiR do campo de busca do formulário do checkboxList
            //    if (oldValue != newValue) {
            //        scope.vm.checkboxList = $filter('filterDefault')(scope.vm.dataFiltered, scope.vm.currentFilter.Nome, scope.vm.currentFilter.searchText)
            //    }
            //});

            scope.vm.check = function (subFilterItem, check, current) {
                // pega os intens marcados na checkboxList e guarda como parâmetro para prox. filtragem dos dados
                var event = {type: 'check'};

                if (check) {
                    scope.vm.currentFilter.Pesquisa.push(subFilterItem);
                } else {
                    scope.vm.currentFilter.Pesquisa = scope.vm.currentFilter.Pesquisa.filter(function (item) {
                        return item !== subFilterItem;
                    });
                }

                setArrayFilterStatus(event);
            }

            scope.vm.toggleCheckAll = function () {
                // marca/desmarca os checkboxes da checkboxList
                var event = {type: 'check'};
                if (scope.vm.currentFilter.toggleCheck) {
                    angular.forEach(scope.vm.checkboxList, function (item) {
                        scope.vm.currentFilter.Pesquisa.push(item);
                    });

                } else {
                    scope.vm.currentFilter.Pesquisa = [];
                }
                setArrayFilterStatus(event);
            };


            scope.vm.toggleTool = function () {
                // mostra o componente de filtro na toolbar
                if (event) {
                    event.stopPropagation();
                }
                element.toggleClass('active');
            }


            /////////// BIND DOS PLUGINS  DE JQUERY-UI ///////////
            element.find(".lista-a, .lista-b").sortable({
                connectWith: ".listas",
                tolerance: "pointer",
                start: start,
                beforeStop: stop,
                stop: setArrayFilterStatus
            });

            element.find(".lista-b").sortable({
                update: reorderArrayFilter,
                receive: createArrayFilter,
                remove: destroyArrayFilter
            });

            $('body').on('focus', ".select-day", function () {
                $(this).datepicker({
                    altFormat: "yy-mm-dd",
                    dateFormat: 'dd/mm/yy',
                    nextText: "",
                    prevText: "",
                    beforeShowDay: disableEmptyDates,
                    onSelect: getSelectedDate
                });
            })

            /////////// CALLBACKS DE INTERAÇÃO DO JQUERY-UI DATEPICKER ///////////
            function getSelectedDate(date, datepicker) {
                // pega a data selecionada e guarda como parâmetro para prox. filtragem dos dados
                var currentDate = $(this).datepicker('getDate');
                var altFormat = datepicker.settings.altFormat;
                var formatedDate = $.datepicker.formatDate(altFormat, currentDate);
                var d = formatedDate + 'T00:00:00';
                console.log(d);
                //TODO: precisa armazenar a data formatada em outro campo do objeto para visualização
                scope.vm.currentFilter.Data = date;
                scope.vm.currentFilter.Pesquisa[0] = d;
            }

            function disableEmptyDates(date) {
                // filtra as datas do calendário de acordo com a filtragem de dados
                var string = date.toLocaleDateString();
                return [scope.vm.filteredDates.indexOf(string) !== -1]
            }

            //////////// CALLBACKS DE INTERAÇÃO DO JQUERY-UI SORTABLE ////////////
            function start(event, ui) {
                // start (lisat-a e lista-b)
                // insere bg amarelo durando evento dragging
                $('.area-menu-filtro').addClass('active');
            }

            function stop(event, ui) {
                // beforeStop (lisat-a e lista-b)
                // remove bg amarelo durando evento dragging
                $('.area-menu-filtro').removeClass('active');
            }

            function createArrayFilter(event, ui) {
                // receive (lista-b)
                // insere o item no array de filtros
                var htmlNode = $(ui.item[0]);
                var currentItem = htmlNode.data('item');


                var obj = angular.copy(scope.vm.itensFiltro[currentItem]);
                //Temp (filtros diferentes de checkboxList)
                if (obj.Nome == "DataColeta") {
                    obj.DataItemPersonalizado = "DataExecucao"
                }
                /////

                obj.idx = htmlNode.index();
                obj.htmlNode = htmlNode;
                obj.Pesquisa = [];

                scope.vm.arrayFilter.push(obj);

            }

            function reorderArrayFilter(event, ui) {
                // update (lista-b) - reordena o array de filtros de acordo com a posição na interface
                var element = $(ui.item[0]);

                scope.vm.arrayFilter.forEach(function (item) {
                    item.idx = item.htmlNode.index();
                });

                scope.vm.arrayFilter.sort(function (a, b) {
                    if (a.idx < b.idx) {
                        return -1;
                    }
                    if (a.idx > b.idx) {
                        return 1;
                    }

                    return 0;
                });

            }

            function setArrayFilterStatus(event) {
                // stop (lista-a lista-b)
                // percorre toda a lista-b seta o status dos itens (azul = ativado / cinza = desativado)
                // refaz a filtragem dos dados de acordo com as opções escolhidas dos formulários
                if (scope.vm.arrayFilter.length == 0) {
                    scope.vm.initialize();
                    return false;
                }

                var currentItem, previousItem;
                currentItem = scope.vm.arrayFilter[0];

                currentItem.htmlNode.addClass('ativado');
                currentItem.htmlNode[0].addEventListener('click', setArrayFilterStatus, false);
                //scope.vm.dataFiltered = angular.copy(scope.vm.data);

                for (var i = 1; i < scope.vm.arrayFilter.length; i++) {
                    if (scope.vm.arrayFilter[i - 1].Pesquisa.length != 0) {
                        currentItem = scope.vm.arrayFilter[i];
                        previousItem = scope.vm.arrayFilter[i - 1];

                        currentItem.htmlNode.addClass('ativado');
                        currentItem.htmlNode[0].addEventListener('click', setArrayFilterStatus, false);

                        //scope.vm.dataFiltered = scope.vm.dataFiltered.filter(function (data) {
                        //    if (previousItem.DataItemPersonalizado !== null) {
                        //        return previousItem.Pesquisa.indexOf(data[previousItem.DataItemPersonalizado]) > - 1;
                        //    }else{
                        //        return previousItem.Pesquisa.indexOf(data[previousItem.Nome]) > - 1;
                        //    }
                        //});
                    } else {
                        scope.vm.arrayFilter[i].htmlNode.removeClass('ativado');
                        scope.vm.arrayFilter[i].htmlNode[0].removeEventListener('click', setArrayFilterStatus, false);
                        scope.vm.arrayFilter[i].Pesquisa = [];
                    }
                }

                // quando a função for disparada á partir de um clique no check
                if (event.type == 'check') {
                    return false
                }

                if (event.type == 'click') {
                    reFilter(event)
                }

                else {
                    setTemplate(currentItem);
                }
            }


            function reFilter(event) {
                // refaz a filtragem dos dados á partir das opções escolhidas dos formulários
                var i = event.target.id;
                var idx = scope.vm.arrayFilter.filter(function (item) {
                    return item.Nome == i;
                })[0].idx;

                var currentItem = scope.vm.arrayFilter[idx];
                var previousItem = scope.vm.arrayFilter[idx - 1];

                //if (previousItem) {
                //    scope.vm.dataFiltered = scope.vm.data.filter(function (data) {
                //        if (previousItem.DataItemPersonalizado !== null) {
                //            return previousItem.Pesquisa.indexOf(data[previousItem.DataItemPersonalizado]) > - 1;
                //        }else{
                //            return previousItem.Pesquisa.indexOf(data[previousItem.Nome]) > - 1;
                //        }
                //    });
                //}else{
                //    scope.vm.dataFiltered = angular.copy(scope.vm.data);
                //}

                setTemplate(currentItem);

            }

            function setTemplate(currentItem) {
                // faz include do formulário de acordo com o template
                scope.vm.arrayFilter.forEach(function (item) {
                    item.htmlNode.removeClass('selecionado');
                });

                scope.vm.arrayFilter[currentItem.idx].htmlNode.addClass('selecionado')

                var currentTemplate = currentItem.Template;

                if (currentTemplate) {
                    var pathTemplate = urlGlobal + 'ViewsAngular/Terminais/Util/filtro/templates/' + currentTemplate + '.html';
                } else {
                    var pathTemplate = urlGlobal + 'ViewsAngular/Terminais/Util/filtro/templates/template-default.html';
                }

                scope.vm.currentFilter = currentItem;
                scope.vm.currentPathTemplate = pathTemplate;

                //if(currentItem.Nome == 'DataColeta'){
                //    scope.vm.filteredDates = $filter('filterDefault')(scope.vm.dataFiltered, 'DataExecucao');
                //}else{
                //    scope.vm.checkboxList = $filter('filterDefault')(scope.vm.dataFiltered, scope.vm.currentFilter.Nome, scope.vm.currentFilter.searchText)
                //}

                scope.vm.checkboxList = currentItem.ItensFiltro;

                scope.$apply();

            }

            function destroyArrayFilter(event, ui) {
                // remove (lista-b)
                // remove o item do array de filtros
                var htmlNode = $(ui.item[0]);
                htmlNode.removeClass('ativado');
                htmlNode.removeClass('selecionado');

                scope.vm.arrayFilter = scope.vm.arrayFilter.filter(function (item) {
                        return item.Nome !== htmlNode.attr('id');
                    }
                );

                ///// USADO PARA VISUALIZAR NO CONSOLE A QTD DE DADOS FILTRADOS ////
                // scope.$watch('controller.dataFiltered', function changeData(newValue, oldValue) {
                //     if (oldValue != newValue) {
                //         console.log('newValue: ' + newValue.length);
                //     }
                // });
            }
        }
    }
})();
