import DragDropController from '../../base/dragDropController';

/**
 * row directive
 */
function row() {
    let directive = {
        template: require('./row.directive.html'),
        restrict: 'EA',
        controller: ['$scope', '$element', '$injector', RowController],
        controllerAs: 'ctrl',
        scope: true
    };

    return directive;
}

/**
 *  Class initializing the controller to add drop functionality
 */
class RowController extends DragDropController {

    /**
     * Attach drop functionality to directive, while also managing the columns and placeholders
     */
    constructor($scope, $element, $injector) {
        super($scope, $element, $injector, 'structure');
        var vm = this;
        let styleOptionFactory = $injector.get('styleOptionFactory', this);
        const drop_container = angular.element($element).find('div')[0];

        // attach drop functionality
        this.attachDrop(drop_container, {
            drop: function(dragged_controller) {
                let el;

                if (dragged_controller.recompile === false) {
                    el = angular.element(dragged_controller.baseElement())[0];
                } else {
                    el = angular.element(vm.$compile(dragged_controller.baseElement())($scope))[0];
                }

                vm.addColumn(el);
                vm.removePlaceholder();
            },
            dragenter: function(dragged_controller) {
                vm.addPlaceholder();
                vm.deleteIfEmpty();
            },
            dragleave: function(dragged_controller) {
                vm.removePlaceholder();
                vm.deleteIfEmpty();
            },
            dragover: function(dragged_controller, e) {
                vm.movePlaceholder(e);
            }
        });

        // attach drop global drop listener
        var dragDropListener = $scope.$on('drag.drop', function(event, el) {
            vm.$timeout(function() {
                vm.removePlaceholder();
                vm.deleteIfEmpty(dragDropListener);
            })
        });

        this.container = angular.element($element).find('div')[0];
        this.options = styleOptionFactory.getOptions([
            'margin',
            'padding',
            'height',
            'background-color',
        ]);

        this.options.margin.value['margin-left'] = -15;
        this.options.margin.value['margin-right'] = -15;
        this.options.height.value['min-height'] = 30;

        this.vm = vm;

        var deleteListener = $scope.$on('pb.elementDeleted', function() {
            vm.setChildrenWidth();
            vm.deleteIfEmpty(deleteListener);
        });

        var dragStartListener = $scope.$on('drag.start', function(event, el) {
            vm.setChildrenWidth();
            vm.deleteIfEmpty(dragStartListener);
        })
    }

    /**
     * add the given element as a column to this row
     * @param el
     */
    addColumn(el) {
        let container = angular.element(this.container);
        el = angular.element(el)
        let _class = container.find('placeholder').prop('class');
        el.addClass(_class);

        container.find('placeholder').replaceWith(el);
        this.setChildrenWidth();
    }

    /**
     * Add a placeholder to this row
     */
    addPlaceholder() {
        // make sure there are a maximum of 4 children including placeholders for this row
        if (this.getColumnCount() > 3)
            return;

        // don't add another placeholder if there is a placeholder present
        /* istanbul ignore next - hard to test, also it's a fail-safe */
        if (angular.element(this.container).find('placeholder').length > 0) {
            this.setChildrenWidth();
            return;
        }

        this.container.append(angular.element(`<placeholder class="col-sm-12"></placeholder>`)[0]);
        this.setChildrenWidth();
    }

    /**
     * remove the placeholder from this row
     */
    removePlaceholder() {
        let placeholder = angular.element(this.container).find('placeholder');
        placeholder.remove();
        this.setChildrenWidth();
    }

    /**
     * delete a row if it is empty and finalize the listener
     * @param {function()} listener
     */
    deleteIfEmpty(listener) {
        if (this.$element.children()[0].children.length < 1) {
            this.$element.next().remove();
            this.$element.remove();

            if (listener)
                listener();
        }
    }

    /**
     * move the placeholder to the correct position when hovering over a row
     * @param {MouseEvent} e
     */
    movePlaceholder(e) {
        let offset = e.target.offsetLeft;                               // get the offset
        let width = e.target.clientWidth;                               // get the width of this row
        let x = e.x - offset;                                           // normalize the x value for this row
        let column_percentile_width = 1.0 / this.getColumnCount();      // set the percentile width
        let column_px_width = width * column_percentile_width;          // set the px width
        let index = Math.floor(x / column_px_width);                    // get the index of the normalized x position
        let container = angular.element(this.container);                // make sure the container is of type JQLite

        if (index > 0) {
            let el = angular.element(Array.from(container.children()).filter(function(n) {
                return n.tagName != 'PLACEHOLDER'
            })[index - 1]);
            el.after(container.find('placeholder'));
        } else {
            container.prepend(container.find('placeholder'));
        }
    }

    /**
     * Set the proper width for the children following the count of said children
     */
    setChildrenWidth() {
        let width = 12 / this.getColumnCount();
        if (!isFinite(width))
            width = 12;

        for (let child of this.container.children) {
            child = angular.element(child);
            child.removeClass('col-sm-12');
            child.removeClass('col-sm-6');
            child.removeClass('col-sm-4');
            child.removeClass('col-sm-3');
            child.addClass(`col-sm-${width}`);
        }
    }

    /**
     * get the current column count (e.g. the count of children)
     * @returns {number} column count
     */
    getColumnCount() {
        return this.container.children.length;
    }
}

export default row;