import ngModule from '../module';
import Component from '../lib/component';
import './smart-table.scss';

class Controller extends Component {
    constructor($element, $, $attrs) {
        super($element, $);
        // this.element = $element[0];

        this.$attrs = $attrs;

        this.registerColumns();
        this.registerEvents();
    }

    registerColumns() {
        const header = this.element.querySelector('thead > tr');
        if (!header) return;
        const columns = header.querySelectorAll('th');

        // TODO: Add arrow icon and so on..
        // Click handler
        for (let column of columns)
            column.addEventListener('click', () => this.orderHandler(column));
    }

    registerEvents() {
        this.$.$on('addRow', () => this.addRow());
        this.$.$on('displaySearch', () => this.displaySearch());
    }

    orderHandler(element) {
        const field = element.getAttribute('field');
        console.log(`You clicked to ` + field);
    }

    displaySearch() {
        console.log('Display the search!');
    }

    addRow() {
        console.log('Add new row element');
        this.$.model.insert({});
    }
}
Controller.$inject = ['$element', '$scope', '$attrs'];

ngModule.directive('smartTable2', () => {
    return {
        controller: Controller,
        bindings: {
        }
    };
});