(function () {
    'use strict';

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

    resizable.$inject = ['$state'];

    /* @ngInject */
    function resizable($state) {
        let directive = {
            restrict: 'A',
            link: linkFunc,
            scope: false
        };
        return directive;

        function linkFunc(scope, element, attrs, ngModel) {
            //exports
            angular.extend(scope.vm, {});

            let mapContainer = $('main');
            let headerHeight = $('.main-header').height();

            element.resizable({
                handles: 'n',
                alsoResize: ".slick-viewport",
                maxHeight: window.innerHeight - headerHeight,
                start: removeAnimation,
                stop: alsoResizeMap
            });

            function removeAnimation(event, ui) {
                mapContainer.css({transition: 'none'});
                scope.vm.dataGridOpen = true;
            }

            function alsoResizeMap(event, ui) {
                mapContainer.css({
                    height: window.innerHeight - headerHeight - ui.element.outerHeight(),
                    transition: 'initial'
                });

                ui.element.css({top: 'inherit'});

                if ($state.current.name === 'setores' && scope.vm.gridSetores) {
                    scope.vm.gridSetores.grid.resizeCanvas();
                }
            }
        }
    }
})();

