import { Component, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core';

import { AgEditorComponent } from 'ag-grid-ng2/main';

@Component({
    selector: 'editor-cell',
    template: `
        <div class="md-select-panel">
            <div #container class="md-select-content">
                <md-option *ngFor="let item of data" (click)="onClick(item[this.params.valueCol])" >
                    {{item[this.params.labelCol]}}
                </md-option>
            </div>
        </div>
    `
})
export class EditorComponent implements AgEditorComponent, AfterViewInit {
    @ViewChild('container', {read: ViewContainerRef}) public container;
    public item: Object = null;
    public data: Object[];
    private params: any;
    ngAfterViewInit() {
        this.container.element.nativeElement.focus();
    }

    agInit(params: any): void {
        this.params = params;
        if (!this.params.valueCol) {
            this.params.valueCol = 'id';
        }
        if (!this.params.labelCol) {
            this.params.labelCol = 'name';
        }
        this.data = params.data || [];
    }

    getValue(): any {
        return this.item;
    }

    isPopup(): boolean {
        return true;
    }

    setValue(item: Object): void {
        this.item = item;
    }

    onClick(item: Object) {
        this.setValue(item);
        this.params.api.stopEditing();
    }

    onKeyDown(event): boolean {
        event.stopPropagation();
        return false;
    }
}