import { element } from 'protractor';
import { InputGroupComponent } from '@farris/ui-input-group';
import { debounceTime } from 'rxjs/operators';
import { ElementRef, NgZone, Injector, Renderer2, OnDestroy, ViewEncapsulation, ChangeDetectorRef, LOCALE_ID, HostListener } from '@angular/core';
/*
 * @Author: 疯狂秀才(Lucas Huang)
 * @LastEditors: 疯狂秀才(Lucas Huang)
 * @Company: Inspur
 * @Version: v0.0.1
 * @Date: 2019-03-12 18:21:51
 * @LastEditTime: 2019-03-13 13:36:58
 */
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { LanguageItem, LanguageData } from './types';
import { of } from 'rxjs';
import { LanguageTextboxComponent } from './language-textbox.component';

@Component({
    selector: 'language-textbox-panel',
    template: `
        <div *ngIf="opened" class="language-textbox-panel f-area-hide" [ngStyle]="getPositionStyles()" (click)="inputClick($event)">
            <ul class="list-group">
                <li class="list-group-item border-0 p-2 px-2"  *ngFor="let item of items">
                    <div class="farris-group-wrap form-inline farris-form-inline">
                        <div class="form-group farris-form-group">
                            <label for="hpinput01" class="col-form-label">
                                <span class="farris-label-text" [attr.title]="'languageLabel.'+item.code | locale: item.name">
                                    {{ 'languageLabel.'+item.code | locale: item.name }}</span>
                            </label>
                            <div class="farris-input-wrap">
                                <input type="input" (click)="inputClick($event)" maxlength="{{maxWords? maxWords[item.code] : ''}}" [(ngModel)]="data[item.code]" class="form-control">
                            </div>
                        </div>
                    </div>
                </li>
                <li class="list-group-item border-0 p-2 px-3 text-right">
                    <button class="btn btn-secondary mr-2" (click)="hide($event)">{{ 'languageLabel.cancel'| locale: '取消' }}</button>
                    <button class="btn btn-primary" (click)="onItemClick($event)">{{ 'languageLabel.ok'| locale: '确定' }}</button>
                </li>
            </ul>
        </div>
    `,
    styles: [
        `.language-textbox-panel {
            overflow: hidden;
            overflow-y: auto;
            padding: 5px;
            position: absolute;
            z-index: 99999;
            background: white;
            box-shadow: 2px 2px 5px #c6c6c6;
        }

        .language-textbox-panel .dropdown-menu {
            left: -5px;
            box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.37);
            position: relative;
        }

        .language-selected {
            background-color: #1890ff!important;
            color: #fff;
        }
        `
    ],
    encapsulation: ViewEncapsulation.None
})
export class LanguageTextPanelComponent implements OnInit, OnDestroy {

    @Input() opened = false;
    @Input() left: number;
    @Input() top: number;
    @Input() width = 365;
    @Input() height = 200;
    @Input() items: LanguageItem[] = [];
    @Input() data: LanguageData = {};
    @Input() maxWords: { [lang: string]: number } = null;

    @Output() itemClick = new EventEmitter<any>();
    @Output() hidePanel = new EventEmitter<any>();
    @Output() showPanel = new EventEmitter<any>();

    currentItem: LanguageItem = undefined;

    languageInputRef = null;

    panelClickHandler = undefined;
    cd: ChangeDetectorRef;
    private inputRef: LanguageTextboxComponent;
    constructor(private el: ElementRef, private ngzone: NgZone, private injector: Injector, public render: Renderer2) {
        this.cd = this.injector.get(ChangeDetectorRef);
    }

    @HostListener('document:keydown.enter', ['$event'])
    onEnterHandler(event: KeyboardEvent) {
        this.onItemClick(event);
    }

    @HostListener('document:keydown.esc', ['$event'])
    onEscHandler(event: KeyboardEvent) {
        this.hide(event);
    }


    ngOnInit(): void {
        this.ngzone.runOutsideAngular(() => {
            this.panelClickHandler = this.render.listen(this.el.nativeElement, 'click', (e) => {
                if (e) {
                    e.stopPropagation();
                }

                // let name = e.target.nodeName || e.target.tagName;
                // if (!name) {
                //     name = e.target.path[0].localeName;
                // }

                // name = name.toLowerCase();
                if (this.inputRef) {
                    this.inputRef.lts.hide();
                }

                return false;
            });
        });
    }

    ngOnDestroy() {
        this.opened = false;
        if (this.panelClickHandler) {
            this.panelClickHandler();
        }
    }

    getPositionStyles() {
        return {
            left: this.left + 'px',
            top: this.top + 'px',
            width: this.width + 'px',
            // height: this.height + 'px'
        };
    }

    private getPanelDivElement() {
        return this.el.nativeElement.querySelector('.language-textbox-panel');
    }

    private resetPanelPosition() {
        const panelEle = this.getPanelDivElement();
        if (panelEle) {
            const panelHeight =  panelEle.offsetHeight;

            const rect = this.inputRef.input.el.nativeElement.getBoundingClientRect();
            const winHeight = window.innerHeight;
            let postop = rect.top;
            if (winHeight - postop - rect.height < panelHeight) {
                postop = postop - panelHeight;
            } else {
                postop = postop + rect.height;
            }

            const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            postop += scrollTop;

            panelEle.style.top = `${postop}px`;
        }

        return panelEle;
    }


    setInputFocus() {
        // 第1个input 获得焦点
        // 获取当前语言的索引，根据索引值定位 input
        const el = this.getPanelDivElement();
        if (!el) {
            return;
        }
        let focusInput =  el.querySelector('input');
        if (this.currentItem && (!this.languageInputRef || this.languageInputRef['autoFocus'])) {
            const idx = this.items.findIndex(n => n.code === this.currentItem.code);
            if (idx > -1) {
                focusInput = el.querySelectorAll('input')[idx];
            }
        }
        if (focusInput) {
            focusInput.focus();
        }
    }

    show(input: any) {
        this.inputRef = input;
        this.opened = true;
        if (this.cd) {
            this.cd.detectChanges();
        }
        setTimeout(() => {
            const el = this.resetPanelPosition();
            let  transitionFlag = true;
            el.addEventListener('transitionend', (e: any) => {
                if (e.target === e.currentTarget && transitionFlag ) {
                    transitionFlag = false;
                    this.showPanel.emit(this);
                }
            }, false);

            // this.render.removeClass(el, 'hide');
            this.render.addClass(el, 'f-area-show');
        });
        return of({ element: this.el });
    }

    hide($event?: any) {
        this.opened = false;
        const el = this.getPanelDivElement();
        // this.render.addClass(el, 'f-area-hide');
        this.hidePanel.emit();
        if ($event) {
            $event.stopPropagation();
            return false;
        }
    }

    onItemClick($event: any) {
        // this.currentItem = item;
        this.itemClick.emit(this.data);
        $event.stopPropagation();
        return false;
    }

    inputClick($event) {
        $event.stopPropagation();
        return false;
    }
}