import ngModule from '../../module';
import Component from '../../lib/component';
import './style.scss';

/**
 * A simple tooltip.
 *
 * @property {String} position The relative position to the parent
 */
export default class Treeview extends Component {
    constructor($element, $scope) {
        super($element, $scope);
        this.data = [];
    }

    $onInit() {
        this.refresh();
    }

    refresh() {
        this.model.refresh().then(() => {
            this.data = this.model.data;
        });
    }

    /**
     * Emits selection event
     * @param {Object} item - Selected item
     * @param {Boolean} value - Changed value
     */
    onSelection(item, value) {
        this.emit('selection', {item, value});
    }

    onCreate(parent) {
        this.emit('create', {parent});
    }

    onToggle(item) {
        if (item.active)
            item.childs = undefined;
        else {
            this.model.applyFilter({}, {parentFk: item.id}).then(() => {
                const newData = this.model.data;

                if (item.childs) {
                    let childs = item.childs;
                    childs.forEach(child => {
                        let index = newData.findIndex(newChild => {
                            return newChild.id == child.id;
                        });
                        newData[index] = child;
                    });
                }

                item.childs = newData.sort((a, b) => {
                    if (b.selected !== a.selected) {
                        if (a.selected == null)
                            return 1;
                        if (b.selected == null)
                            return -1;
                        return b.selected - a.selected;
                    }

                    return a.name.localeCompare(b.name);
                });
            });
        }

        item.active = !item.active;
    }
}

Treeview.$inject = ['$element', '$scope'];

ngModule.component('vnTreeview', {
    template: require('./index.html'),
    controller: Treeview,
    bindings: {
        model: '<',
        icons: '<?',
        disabled: '<?',
        selectable: '<?',
        editable: '<?',
        aclRole: '@?'
    }
});