(function () {
    'use strict';

    angular
        .module('setoresApp')
        .directive('ferramentaVeiculoRotas', ferramentaVeiculoRotas);

    ferramentaVeiculoRotas.$inject = ['__env', 'setoresServiceFactory', 'ngNotify', 'infowindowTemplates', 'mapsSingletonService'];

    /* @ngInject */
    function ferramentaVeiculoRotas(__env, setoresServiceFactory, ngNotify, infowindowTemplates, mapsSingletonService) {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: __env.appPath + 'scripts/components/tools/veiculo-rotas/ferramenta-veiculo-rotas.directive.html',
            link: link,
            scope: false
        };

        function link(scope) {
            angular.extend(scope.vm, {
                toggleSelecaoMapa: toggleSelecaoMapa
            });

            scope.vm.habilitaConsultaSetoresMapa = false;

            function toggleSelecaoMapa(enabled = true) {
                const currentMap = mapsSingletonService.getMap();
                scope.vm.habilitaConsultaSetoresMapa = !scope.vm.habilitaConsultaSetoresMapa && enabled;

                if (!scope.vm.habilitaConsultaSetoresMapa) {
                    currentMap.removeEventMap(InlogMaps.MapEventType.Click);
                    currentMap.togglePolygons(false, 'setorPonto');
                    currentMap.closePopup('setorPonto');
                    $('#map, #map svg *').removeClass('cursor-locate');
                }
                else {
                    currentMap.addEventMap(InlogMaps.MapEventType.Click,
                        event => habilitaBuscaSetores(event));
                    $('#map, #map svg *').addClass('cursor-locate');
                }
            }

            function habilitaBuscaSetores(event) {
                scope.vm.showLoading();
                setoresServiceFactory.carregarSetoresPorPonto(event.latlng[0], event.latlng[1])
                    .then(successBuscaSetores)
                    .catch((error) => console.error(error));
            }

            function successBuscaSetores(result) {
                if (result.data && result.data.length > 0) {
                    /* Plotar setores encontrados no mapa */
                    result.data.forEach((setor) => {
                        setor.Areas.forEach((area) => {
                            let pontos = area.Coordenadas.map(coordenada =>
                                [coordenada.Latitude / 1000000, coordenada.Longitude / 1000000]);

                            const options = new InlogMaps.PolygonOptions(pontos, 2, true, '#000');
                            options.fillColor = '#FFFFFF';
                            options.fillOpacity = 0.4;
                            options.object = {
                                codigo: setor.Codigo,
                                descricao: setor.Descricao
                            };

                            mapsSingletonService.getMap().drawPolygon('setorPonto', options, setorClick);
                        });
                    });
                    /* TODO: Mostrar descrição do setor com overlay no mapa, no centro do setor */
                } else {
                    ngNotify.set('Nenhum setor cadastrado nesse ponto.', {
                        type: 'warn',
                        sticky: true
                    });
                }
                scope.vm.hideLoading();
            }

            function setorClick(event, setor) {
                const options = new InlogMaps.PopupOptions(event.latlng,
                    infowindowTemplates.montarInfoWindowSetorPonto(setor.descricao));

                mapsSingletonService.getMap().drawPopup('setorPonto', options);
            }
        }
    }
})();
