import { LocaleService } from '@farris/ui-locale';
import { Component, ElementRef, Input, Output, OnInit,
    Renderer2, ViewChild, OnChanges, SimpleChanges, EventEmitter, HostBinding } from '@angular/core';
import { MessagerService } from '@farris/ui-messager';



@Component({
    selector: 'farris-enum-editor',
    templateUrl: './enum-editor.component.html',
    styles: []
})
export class EnumEditorComponent implements OnInit, OnChanges {

    /** enum data */
    @Input() data: any = [];
    @Input() columns: { label: string, value: string }[] = [];

    @Input() textField = 'name';
    @Input() valueField = 'value';

    @Output() dataChange = new EventEmitter();

    @ViewChild('tablebodybox') tablebodybox: ElementRef;

    @HostBinding('class') cls = 'd-flex flex-column flex-fill';
    @HostBinding('style.overflow') overflow = 'hidden';
    @HostBinding('style.height') height = '100%';

    @Input() showSortBtns = true;

    currentEnumData: { index: number, data: any } = null;

    private newEnumData: any = {
        [this.textField]: '',
        [this.valueField]: ''
    };

    constructor(private el: ElementRef, private render: Renderer2, private messagerService: MessagerService,
                private localeSer: LocaleService) { }

    ngOnChanges(changes: SimpleChanges) {
        // console.log(changes);
    }

    ngOnInit() {
    }

    insertCondition(index: number) {
        const newEnumData = Object.assign({}, this.newEnumData);
        if (index === 0) {
            this.data.unshift(newEnumData);
        } else {
            this.data.splice(index, 0, newEnumData);
        }

        this.changeConditionList();
    }

    remove(index: number) {
        this.data.splice(index, 1);
        this.changeConditionList();

        if (this.currentEnumData) {
            if (index === this.currentEnumData.index) {
                this.currentEnumData = null;
            }
        }
    }

    onAddFilter() {
        this.data = [...this.data, Object.assign({}, this.newEnumData)];
        this.changeConditionList();
    }

    onClear() {
        this.messagerService.question(this.localeSer.getValue('enumEditor.message'), () => {
            this.data = [];
            this.changeConditionList();
        });
    }

    onMoveTop() {
        if (this.currentEnumData) {
            this.data.unshift(this.currentEnumData.data);
            this.data.splice(this.currentEnumData.index + 1, 1);

            this.currentEnumData.index = 0;
            this.changeConditionList();
        }
    }

    onMovePrev() {
        if (this.currentEnumData) {
            const index = this.currentEnumData.index;
            const tempArr = this.data.splice(index, 1);
            this.data.splice(index - 1, 0, ...tempArr);

            this.currentEnumData.index = index - 1;
            this.changeConditionList();
        }
    }
    onMoveNext() {
        if (this.currentEnumData) {
            const index = this.currentEnumData.index;
            const tempArr = this.data.splice(index, 1);
            this.data.splice(index + 1, 0, ...tempArr);

            this.currentEnumData.index = index + 1;
            this.changeConditionList();
        }
    }
    onMoveBottom() {
        if (this.currentEnumData) {
            this.data.push(this.currentEnumData.data);
            this.data.splice(this.currentEnumData.index, 1);
            this.currentEnumData.index = this.data.length - 1;
            this.changeConditionList();
        }
    }

    private changeConditionList() {
        this.dataChange.next(this.data);
    }

    selected($event) {
        // console.log($event);
        this.currentEnumData = $event;
    }

    isSelected($event: number) {
        if (this.currentEnumData) {
            return this.currentEnumData.index === $event;
        }
        return false;
    }

}