import { Component, Input, EventEmitter, HostListener } from '@angular/core';
import { CrudComponentObj } from '../index';
import { BaseComponent } from './base.component';
import { Service } from '../services/index';
import { Observable } from 'rxjs/Rx';
import { Http } from '@angular/http';
import * as $ from 'jquery';
import {DataTable} from 'primeng/primeng';
const ESCAPE_KEYCODE = 27;

@Component({
    selector: 'tableCrudRestful',
    template: `
        <div class="row" id="table{{clazzName}}{{index}}" style="margin-top : 20px; margin-bottom : 20px;">
            <div class="col-md-12">
                <p-dataTable #dt id="table" [value]="itens" selectionMode="single" [(selection)]="selected" (onRowSelect)="onRowSelect($event)" 
                    [sortField]="sortField" [sortOrder]="sortOrder"
                    [rows]="rows" [paginator]="paginator" [pageLinks]="pageLinks" [responsive]="true">
                    <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header" [sortable]="col.sortable"></p-column>
                    <p-footer>
                        <div class="ui-helper-clearfix" style="width:100%">
                            <button class="btn btn-primary btn-margin-vertical pull-left" type="button" (click)="newItem(dt)" style="margin-top: 5px;">
                                <strong>
                                    <i class="fa fa-plus"></i>&nbsp;{{ 'COMMON.BUTTON.ADD' | translate }}
                                </strong>
                            </button>
                        </div>
                    </p-footer>
                </p-dataTable>
            </div>
        </div>
    `
})

export class TableComponent extends BaseComponent {
    cols: any[] = [];
    itens: any[] = [];
    selected : any;
    dt : DataTable;
    lang : string;
    disabledKeyListener : boolean;
    
    @Input() broadcast: EventEmitter<any> = new EventEmitter<any>();
    @Input() onTableLoaded: EventEmitter<any>;
    @Input() onTableRowSelected: EventEmitter<any>;
    @Input() onNewItem : EventEmitter<any>;
    @Input() onTableStartLoading: EventEmitter<any>;
    
    constructor(public service: Service, private http: Http) {
        super();
        setTimeout(() => {
            this.lang = this.translate.currentLang;
        }, 50);        
    }
    
    ngOnInit() {
        this.readCommonsParameters(this.index);
        this.loadData();
        if (this.broadcast != undefined) {
            this.broadcast.subscribe(data => {
                this.readCommonsParameters(this.index);
                if (data == undefined) {
                    this.loadData();
                } else {
                    if (typeof data == 'string') {
                        let url = JSON.parse(data);
                        if (url.url) {
                            this.loadDataFromUrl(url.url);
                        }                        
                    }
                }
            });
        }
    }
    
    public notify(): void {
        setTimeout(() => {
            if (this.lang != this.translate.currentLang) {
                this.lang = this.translate.currentLang;
                this.loadData(true);
            }
        }, 50);
    }    
    
    loadData(onlyCols : boolean = false) {
        this.cols = [];
        setTimeout(() => {
            let emptyMessage = this.translate.instant(this.emptyMessage);
            $('.ui-datatable-emptymessage').html(emptyMessage);
        }, 50);        
        CrudComponentObj.getComponents(this.clazzName)[this.index].value = [];
        CrudComponentObj.getComponents(this.clazzName).forEach(comp => {
            if (comp.tableColumn != undefined && comp.tableColumn >= 0) {
                setTimeout(() => {
                    let name = comp.name;
                    if (comp.translateKey) {
                        name = this.translate.instant(comp.translateKey);
                    }
                    this.cols.push({ field: comp.property, header: name, sortable: comp.sortable, order : comp.tableColumn });
                }, 50);                        
            }
        });
        
        this.cols = this.cols.sort((o1,o2) => {
            if (o1.order > o2.order) {
                return 1;
            }

            if (o1.order < o2.order) {
                return -1;
            }
            return 0;
        });
        
        if (onlyCols) {
            return;
        }
        
        let crudComponentObj = CrudComponentObj.getComponents(this.clazzName)[this.index];
        setTimeout(() => {            
            if (crudComponentObj.fileConfig != undefined) {
                this.http.get(this.fileConfig).map(res => res.json())
                    .subscribe(config => {
                        let keys : string[] = this.fileConfigServerKey.split('.');
                        let server : any = null;
                        keys.forEach(key => {
                            if (server == null) {
                                server = config[key];
                            } else {
                                server = server[key];
                            }
                        });
                        this.loadDataFromUrl(server + crudComponentObj.url);
                    });                
            } else {
                this.loadDataFromUrl(crudComponentObj.url);
            }                        
        }, 100);
    }
    
    loadDataFromUrl(url:string) {
        if (url == undefined) {
            return;
        }
        if ($('#table' + this.clazzName + this.index).css("display") == 'none') {
            return;
        }
        if (!!this.onTableStartLoading) {
            this.onTableStartLoading.emit();
        }
        let newItens : any[] = [];
        let crudComponentObj = CrudComponentObj.getComponents(this.clazzName)[this.index];
        crudComponentObj.fileConfig = undefined;
        crudComponentObj.url = url;
        let translateKeyByValues = crudComponentObj.translateKeyByValues;
        let translateColumns = crudComponentObj.translateColumns;
        this.getItens(url)
            .subscribe(itens => {
                itens.forEach(item => {
                    newItens.push(item);
                    if (!!translateKeyByValues && !!translateColumns) {
                        for (let i=0; i < translateKeyByValues.length; i++) {
                            Object.keys(item).forEach(key => {
                                translateColumns.forEach(column => {
                                    if (key == column && translateKeyByValues[i][item[key]] != undefined) {
                                        item['_'+key] = item[key];
                                        item[key] = this.translate.instant(translateKeyByValues[i][item[key]]);
                                    }
                                });
                            });
                        }
                    }                                
                });
            },
            error => {
                console.log(error);
                if (this.onTableLoaded != undefined) {
                    this.onTableLoaded.emit();
                }  
                this.itens = [];
            },
            () => {
                this.sort(crudComponentObj, newItens);
                this.itens = newItens;
                if (this.onTableLoaded != undefined) {
                    this.onTableLoaded.emit();
                }                                
            }
        );                                        
    }
    
    sort(crudComponentObj : CrudComponentObj, newItens : any[]) {
        newItens.sort((o1,o2) => {
            if (crudComponentObj.sortOrder == 1) {
                if (o1[crudComponentObj.sortField] > o2[crudComponentObj.sortField]) {
                    return 1;
                }
                if (o1[crudComponentObj.sortField] < o2[crudComponentObj.sortField]) {
                    return -1;
                }                                        
            } else {
                if (o1[crudComponentObj.sortField] < o2[crudComponentObj.sortField]) {
                    return 1;
                }
                if (o1[crudComponentObj.sortField] > o2[crudComponentObj.sortField]) {
                    return -1;
                }                                        
            }
            return 0;
        });
    }
    
    getItens(url : string): Observable<any[]> {
        return this.service.get(url);
    }    
    
    onRowSelect(event) {
        this.selected = event.data;
        let translateKeyByValues : string[];
        let translateColumns : string[];
        let setFocus : string;
        let clazzName : string;        
        CrudComponentObj.getComponents(this.clazzName).forEach(comp => {
            if (!!comp.translateKeyByValues) {
                translateKeyByValues = comp.translateKeyByValues;
            }
            if (!!comp.translateColumns) {
                translateColumns = comp.translateColumns;            
            }
            if (this.selected[comp.property]) {
                let property = comp.property;
                if (!!translateKeyByValues && !!translateColumns) {
                    if (translateColumns.indexOf(property) >= 0) {
                        property = '_' + property;
                    }
                }
                comp.value = this.selected[property];
                if (comp.mask != undefined) {
                    $("input[name='" + comp.name +"']").val(this.selected[property]);
                } else {
                    $('#' + comp.clazzName + '_' + comp.property).val(this.selected[property]).change();
                }
            } else {
                comp.value = null;
                if (comp.mask != undefined) {
                    $("input[name='" + comp.name +"']").val(null);
                } else {
                    $('#' + comp.clazzName + '_' + comp.property).val(null).change();
                }
            }
            if (!!comp.setFocus) {
                setFocus = comp.setFocus;
                clazzName = comp.clazzName;
            }
            if (setFocus == comp.property) {
                comp.instance.setFocus(clazzName, comp.property);
            }            
        });
        BaseComponent.showOrHideComponents(this.clazzName, 'flex');
        if (this.autoHide) {
            $('#table' + this.clazzName + this.index).css("display", "none");
        }
        BaseComponent.setShowRemove(this.clazzName, true);
        this.concreteSubject.notify('CRUD-COMPONENT');
        if (this.onTableRowSelected != undefined) {
            this.onTableRowSelected.emit(event);
        }
    }
    
    newItem(dt : DataTable) {
        this.clearSelection();
        this.dt = dt;
        let setFocus : string;
        let clazzName : string;
        CrudComponentObj.getComponents(this.clazzName).forEach(comp => {
            if (comp.defaultValue != undefined) {
                comp.value = comp.defaultValue;
                $('#' + comp.clazzName + '_' + comp.property).val(comp.value);
            } else if (comp.initialValue != undefined) {
                $('#' + comp.clazzName + '_' + comp.property).val('-1');
            } else {
                comp.value = null;
                $('#' + comp.clazzName + '_' + comp.property).val(null);
            }
            if (!!comp.setFocus) {
                setFocus = comp.setFocus;
                clazzName = comp.clazzName;
            }
            if (setFocus == comp.property) {
                comp.instance.setFocus(clazzName, comp.property);
            }
        });
        if (this.autoHide) {
            $('#table' + this.clazzName + this.index).css("display", "none");
        }
        BaseComponent.showOrHideComponents(this.clazzName, 'flex');        
        BaseComponent.setShowRemove(this.clazzName, false);
        BaseComponent.setHideMsgError(this.clazzName, true);
        this.concreteSubject.notify('CRUD-COMPONENT');
        if (this.onNewItem != undefined) {
            this.onNewItem.emit(event);
        }        
    }

    @HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
        if (event.keyCode === ESCAPE_KEYCODE && !this.disabledKeyListener) {
            this.clearSelection();
        }
    }    

    public clearSelection() {
        BaseComponent.showOrHideComponents(this.clazzName, 'none');
        this.concreteSubject.notify('CRUD-COMPONENT');
        this.selected = null;
    }

    public disableKeyListener() {
        this.disabledKeyListener = true;
    }

    public enableKeyListener() {
        this.disabledKeyListener = false;
    }    
}