import {module} from '../module';
require('./style.css');

directive.$inject = ['vnDialog'];
export function directive(dialog) {
    return {
        restrict: 'A',
        link: function($scope, $element, $attrs, $ctrl) {
            $element.on('click', function(event) {
                dialog.showComponent($attrs.vnDialog, $scope);
                event.preventDefault();
            });
        }
    }
}
module.directive('vnDialog', directive);

factory.$inject = ['$document', '$compile'];
export function factory($document, $compile) {
    return {
        show: function(childElement) {
            let background = $document[0].createElement('div');
            background.className = 'vn-background';
            background.addEventListener('mousedown',
                this.onBackgroundMouseDown.bind(this));
            this.background = background;

            let dialog = $document[0].createElement('div');
            dialog.className = 'vn-dialog';
            dialog.addEventListener('mousedown',
                this.onDialogMouseDown.bind(this));
            dialog.appendChild (childElement);
            background.appendChild (dialog);
            this.dialog = dialog;

            let style = this.dialog.style;
            let screenMargin = 20;

            let width = dialog.offsetWidth;
            let height = dialog.offsetHeight;
            let innerWidth = window.innerWidth;
            let innerHeight = window.innerHeight;

            if(width + screenMargin > innerWidth) {
                width = innerWidth - dblMargin;
                style.width = width +'px';
            }
            if(height + screenMargin > innerHeight) {
                height = innerHeight - dblMargin;
                style.height = height +'px';
            }

            $document[0].body.appendChild (background);
        },
        showComponent: function(childComponent, $scope) {
            let childElement = $document[0].createElement(childComponent);
            $compile(childElement)($scope);
            this.show(childElement);
        },
        hide: function() {
            $document[0].body.removeChild (this.background);
            this.background = null;
            this.dialog = null;
            this.lastEvent = null;
        },
        onDialogMouseDown: function(event) {
            this.lastEvent = event;
        },
        onBackgroundMouseDown: function(event) {
            if (event != this.lastEvent)
                this.hide();
        }
    };
}
module.factory('vnDialog', factory);