import { Directive, OnInit, AfterViewInit, Renderer2, Injector, Input} from '@angular/core';
import { InputGroupComponent } from '@farris/ui-input-group';
import { PersonalConfigService } from './lookup-presonalConfig.service';
import { delay } from 'rxjs/operators';
import { LocaleService } from '@farris/ui-locale';
@Directive({
    selector: '[lookup-tip]'
})
export class LookupTipDirective implements OnInit, AfterViewInit {
    @Input('lookup-tip') enableTip = false;
    private tipPanel: Element;
    private leaveEvent: any;
    private enterEvent: any;
    private clickEvent: any;
    private isInTipPanel = false;
    private selected: any[];
    private personalConfigService: PersonalConfigService;
    public localService: LocaleService;
    private tipText = '您要找的是不是这些？';
    constructor(
        private inputRef: InputGroupComponent,
        private renderer: Renderer2,
        public injector: Injector
    ) {
        this.personalConfigService = this.injector.get(PersonalConfigService, null);
        this.localService = this.injector.get(LocaleService);
    }

    ngOnInit(): void {
        this.tipText = this.localService.getValue('lookup.tipText');
        this.enableTip = false; // 因数据权限问题，此功能暂屏蔽 tfs: 403924
        if (this.enableTip) {
            this.inputRef.iconMouseEnter.subscribe(e => {
                this.creatPanel();
            });
            this.inputRef.iconMouseLeave.pipe(delay(200)).subscribe(e => {
                if (!this.isInTipPanel) {
                    this.removePanel();
                }
            });
            this.inputRef.clickHandle.subscribe(e => {
                this.removePanel();
            });
        }
    }

    ngAfterViewInit(): void { }

    // 获取快捷输入数据
    private getQuickSelectedByLocaleId() {
        const localeid = this.localService.localeId;
        const personalConf = this.personalConfigService.getPersonalData();
        if (personalConf && personalConf.quickSelected) {
            const items = personalConf.quickSelected[localeid];
            if (items && items.length) {
                return items;
            }
        }

        return null;
    }

    creatPanel() {
        this.selected = this.getQuickSelectedByLocaleId();
        if (this.tipPanel || !this.selected || (this.selected && this.selected.length === 0)) {
            return;
        }
        const pos = this.setPosition();
        const ul = this.renderer.createElement('ul');
        const path = this.personalConfigService.textField.split('.');
        this.selected.forEach((item, index) => {
            const li = this.renderer.createElement('li');
            li.innerHTML = this.find(item, this.personalConfigService.textField);
            this.renderer.setProperty(li, 'id', index);
            this.renderer.appendChild(ul, li);
        });
        const header = this.renderer.createElement('div');
        this.renderer.addClass(header, 'lookup-tip-header');
        header.innerHTML = this.tipText;
        this.tipPanel = this.renderer.createElement('div');
        this.renderer.appendChild(this.tipPanel, header);
        this.renderer.appendChild(this.tipPanel, ul);
        this.renderer.addClass(this.tipPanel, 'lookup-tip');
        this.renderer.setStyle(this.tipPanel, 'top', pos.top);
        this.renderer.setStyle(this.tipPanel, 'left', pos.left);
        this.renderer.setStyle(this.tipPanel, 'width', pos.width);
        this.renderer.appendChild(document.body, this.tipPanel);
        this.leaveEvent = this.renderer.listen(this.tipPanel, 'mouseleave', () => {
            this.removePanel();
        });
        this.enterEvent = this.renderer.listen(this.tipPanel, 'mouseenter', () => {
            this.isInTipPanel = true;
        });
        this.clickEvent = this.renderer.listen(this.tipPanel, 'click', (e) => {
            if (e.target.nodeName === 'LI') {
                this.selectItem(e.target.id);
            }
        });
    }

    removePanel() {
        if (document.body.contains(this.tipPanel)) {
            this.renderer.removeChild(document.body, this.tipPanel);
            this.tipPanel = null;
            this.isInTipPanel = false;
            this.leaveEvent();
            this.enterEvent();
            this.clickEvent();
        }
    }

    setPosition() {
        const { left, top, width, height } = this.inputRef.inputGroup.nativeElement.getBoundingClientRect();
        return {
            left: left + 'px',
            top: top + height + 'px',
            width: width + 'px'
        };
    }

    selectItem(val) {
        const item = this.selected.find((el, index) => Number(val) === index);
        this.removePanel();
        if (this.personalConfigService.singleSelect) {
            this.personalConfigService.selectItemObser$.next(item);
        } else {
            this.personalConfigService.selectItemObser$.next([item]);
        }
    }

    find(obj, keys) {
        const keyArr = keys.split('.');
        const key = keyArr[0];
        const target = obj[key];
        if (target instanceof Object) {
            keyArr.shift();
            return this.find(target, keyArr.join('.'));
        } else {
            return target;
        }
    }
}