import {module} from '../module';
import './style.scss';

export default class DropDown {
    constructor($element, $filter) {
        this.$element = $element;
        this.$filter = $filter;
        this.search = '';
        this.itemsFiltered = [];

    }

    filterItems() {
        this.itemsFiltered = this.search ? this.$filter('filter')(this.items, this.search) : this.items;
    }

    onFilterRest() {
        this.showLoadMore = false;
        if (this.filterAction) {
            this.filterAction({search: this.search});
        }
    }

    $onChanges(changesObj) {
        if (changesObj.show && changesObj.top && changesObj.top.currentValue) {
            this.$element.css('top', changesObj.top.currentValue + 'px');
        }
        if (changesObj.items) {
            this.filterItems();
        }
    }

    clearSearch() {
        this.search = '';
        this.showLoadMore = this.loadMore != null;
        if (this.filterAction) {
            this.filterAction({search: this.search});
        } else {
            this.filterItems();
        }
    }
}
DropDown.$inject = ['$element', '$filter'];

module.component('vnDropDown', {
    template: require('./drop-down.html'),
    controller: DropDown,
    bindings: {
        items: '<',
        show: '<',
        filter: '@?',
        selected: '=',
        loadMore: '&?',
        filterAction: '&?',
        showLoadMore: '<?',
        top: '<?'
    }
});