import { Component, EventEmitter, HostBinding, OnInit, Output, Input } from '@angular/core';
import { EnumEditorComponent } from './enum-editor.component';

@Component({
    selector: 'enum-editor-footer',
    template: `
    <div class="footer-container">
        <button type="button" (click)="onAddFilter()"
            class="k-button k-button-icontext k-flat "><span class="k-icon k-i-add"></span> {{ 'enumEditor.addWhere' | locale }}</button>
        <button type="button" (click)="onClear()" [disabled]="!grid.data.length"
            class="k-button k-button-icontext k-flat "><span class="k-icon k-i-delete"></span> {{ 'enumEditor.clear' | locale }}</button>
        <ng-container *ngIf="showSortBtns">
            <button type="button" [disabled]="!canMoveUp()" (click)="onMoveTop()"
            class="k-button k-button-icontext k-flat "><span class="k-icon k-i-arrow-end-up"></span>
            {{'enumEditor.moveTop' | locale }}</button>
        <button type="button" [disabled]="!canMoveUp()" (click)="onMovePrev()"
            class="k-button k-button-icontext k-flat "><span class="k-icon k-i-arrow-60-up"></span>
            {{'enumEditor.moveUp' | locale }}</button>
        <button type="button" [disabled]="!canMoveDown()" (click)="onMoveNext()"
            class="k-button k-button-icontext k-flat "><span class="k-icon k-i-arrow-60-down"></span>
            {{'enumEditor.moveDown' | locale }}</button>
        <button type="button" [disabled]="!canMoveDown()" (click)="onMoveBottom()"
            class="k-button k-button-icontext k-flat"><span class="k-icon k-i-arrow-end-down"></span>
            {{'enumEditor.moveBottom' | locale }}</button>
            </ng-container>
    </div>
    `
})
export class EnumEditorFooterComponent implements OnInit {
    @HostBinding('class') cls = 'f-filter-footer';

    @Input() showSortBtns = true;

    @Output() addFilter = new EventEmitter();
    @Output() clearFilter = new EventEmitter();

    @Output() moveTop = new EventEmitter();
    @Output() movePrev = new EventEmitter();
    @Output() moveNext = new EventEmitter();
    @Output() moveBottom = new EventEmitter();

    constructor(public grid: EnumEditorComponent) { }

    ngOnInit() { }

    onAddFilter() {
        this.addFilter.emit();
    }

    onClear() {
        this.clearFilter.emit();
    }

    onMoveTop() {
        this.moveTop.emit();
    }
    onMovePrev() {
        this.movePrev.emit();
    }
    onMoveNext() {
        this.moveNext.emit();
    }
    onMoveBottom() {
        this.moveBottom.emit();
    }


    canUse() {
        if (this.grid.currentEnumData) {
            return this.grid.data.length > 1;
        }

        return false;
    }

    canMoveUp() {
        if (this.canUse()) {
            return this.grid.currentEnumData.index > 0;
        }

        return false;
    }

    canMoveDown() {
        if (this.canUse()) {
            return this.grid.currentEnumData.index < this.grid.data.length - 1;
        }

        return false;
    }
}