import { ViewModel, Component, IProps, StatelessView } from '@dezrez/core';
import { map, indexOf, filter, assign } from 'lodash';
import { guid } from '@dezrez/core';

export interface IDataTableSettings extends IProps {
    items: any[];
    itemTemplate: string;
    title: string;
    columns: KnockoutObservableArray<IColumn>;
    actions: IAction[];
}

export interface IColumn {
    name: string;
    className: string;
}

export interface IAction {
    text: string;
    buttonClass: string;
    execute: Function;
    position: string;
}

@Component({
    view: require('./datatable.html')
})
export class DataTable extends ViewModel implements IDataTableSettings {
    public items = [];
    public itemTemplate: string;
    public title;
    public left: KnockoutObservable<IAction[]>;
    public right: KnockoutObservable<IAction[]>;
    public menu: KnockoutObservable<IAction[]>;
    public columns = ko.observableArray([]);
    public actions;
    public id;

    constructor(settings: IDataTableSettings) {
        super();
        this.columns = settings.columns;
        this.itemTemplate = settings.itemTemplate;
        this.items = settings.items;
        this.actions = settings.actions;
        this.title = settings.title;
        this.id = guid();
    }

    sortActionButtons(actions: IAction[]): void {
        this.left(filter(actions, (action: IAction) => {
            action.position.toLowerCase() === 'left';
        }));
        this.right(filter(actions, (action: IAction) => {
            action.position.toLowerCase() === 'right';
        }));
        this.menu(filter(actions, (action: IAction) => {
            action.position.toLowerCase() === 'menu';
        }));
    }

    execute() {
        console.log('Execute');
    }

    bindElement() {
        return assign({ preserveContext: true }, this.bindView(this.itemTemplate, 'tr'));
    }
}