import ngModule from '../../module';
import './style.scss';

export default class Table {
    constructor($scope, $element, $transclude) {
        this.$scope = $scope;
        this.table = $element[0];
        this.field = null;
        this.order = null;
        this.autoLoad = true;
    }

    setOrder(field, order) {
        this.field = field;
        this.order = order;
    }

    applyOrder(field = this.field, order = this.order) {
        if (field && order) {
            this.model.order = `${field} ${order}`;
            this.setActiveArrow();
        }

        this.model.refresh();
    }

    $onChanges() {
        // FIXME: The autoload property should be removed from vnTable
        // because it's already implemented at vnModel
        if (this.autoLoad && this.model && !this.model.data)
            this.applyOrder();
    }

    setActiveArrow() {
        let columns = this.table.querySelectorAll('vn-thead vn-th');
        columns.forEach(column => {
            column.classList.remove('active');
        });

        let selector = `vn-thead vn-th[field="${this.field}"]`;
        let activeColumn = this.table.querySelector(selector);
        activeColumn.classList.add('active');
    }
}

Table.$inject = ['$scope', '$element', '$transclude'];

ngModule.component('vnTable', {
    template: require('./index.html'),
    transclude: true,
    controller: Table,
    bindings: {
        model: '<?',
        autoLoad: '<?'
    }
});