import { debounceTime, map, auditTime, filter } from 'rxjs/operators';
import { Component, OnInit, EventEmitter, Output, ElementRef,
    ViewChild, OnDestroy, NgZone, Injector, AfterViewInit, Input } from '@angular/core';
import { Subscription, fromEvent } from 'rxjs';

@Component({
    selector: 'find-input',
    template: `
        <div class="f-find-input" style="">
            <div class="input-group">
                <div class="input-group-prepend">
                    <select class="form-control" [(ngModel)]="findField">
                        <option *ngFor="let col of columns" value="{{col.field}}">{{ col.title }}</option>
                    </select>
                </div>
                <input #input type="text" placeholder="至少2个字符" class="form-control"
                    (keydown.esc)="onClose($event)" (keydown.enter)="onEnter($event, 0)">
                <div class="input-group-append">
                    <span class="input-group-text">{{current}}/{{count}}</span>
                    <button class="btn btn-outline-secondary" type="button" title="上一个"
                        [disabled]="current === 0" (click)="onEnter($event, -1)">
                        <span class="f-icon f-icon-arrow-chevron-up"></span>
                    </button>
                    <button class="btn btn-outline-secondary" type="button" title="下一个"
                    [disabled]="current === count" (click)="onEnter($event, 1)">
                        <span class="f-icon f-icon-arrow-chevron-down"></span>
                    </button>
                    <button class="btn btn-outline-secondary" type="button" title="关闭" (click)="onClose($event)">
                        <span class="f-icon f-icon-close"></span>
                    </button>
                </div>
            </div>
        </div>
    `,
    styles: [
        `
        .f-find-input {
            width: 300px; height: 40px; background: #fefefe; position: absolute; right: 0; z-index: 10; padding: 5px;
            border: 1px solid #d5d5d5;
            box-shadow: 0px 1px 2px 0px #989898;
        }
        .f-find-input .input-group-text { border-right: 1px solid #ccc; font-size: 10px }
        .f-find-input .input-group-append { background: #fff; }
        .f-find-input .input-group-append button { padding:1px 6px;}
        `
    ]
})
export class FindInputComponent implements OnInit, OnDestroy, AfterViewInit {
    @Input() current = 0;
    @Input() count = 0;
    @Input() columns = [];

    @Output() close = new EventEmitter();
    @Output() valueChanged = new EventEmitter();
    @Output() enterHandler = new EventEmitter();

    @ViewChild('input') input: ElementRef;
    findField = '';
    private keyupEventSub: Subscription = null;

    constructor(private el: ElementRef, private ngZone: NgZone, private injector: Injector) { }

    ngOnInit() {
        if (this.columns.length) {
            this.columns = this.columns.filter(c => !c.formatter && c.field);
            this.findField = this.columns[0].field;
        }

        this.ngZone.runOutsideAngular(() => {
            this.keyupEventSub = fromEvent(this.input.nativeElement, 'keyup').pipe(
                filter((e: any) => (e.switch || e.keyCode) !== 13),
                debounceTime(200),
                map((e: any) => e.target.value)
            ).subscribe((v) => {
                this.valueChanged.emit({value: v, field: this.findField});
            });
        });
    }

    ngAfterViewInit() {
        this.input.nativeElement.focus();
    }

    ngOnDestroy() {
        if (this.keyupEventSub) {
            this.keyupEventSub.unsubscribe();
        }
        this.keyupEventSub = null;
    }

    onClose(event) {
        this.close.emit();
        return false;
    }

    onEnter($event, step) {
        this.enterHandler.emit(step);
        return false;
    }

}