import {
    Component,
    Input,
    AfterViewInit,
    OnInit,
    ElementRef,
    ContentChild,
    TemplateRef,
    Output,
    EventEmitter,
    Renderer2,
    OnDestroy
} from '@angular/core';
import { DropdownItem } from './dropdown.item.props';

@Component({
    selector: 'farris-dropdown',
    template: `
        <div
            class="farris-dropdown btn-group"
            [class.dropup]="position === 'top'"
            [class.dropdown]="position === 'bottom'"
            [class.dropleft]="position === 'left'"
            [class.dropright]="position === 'right'"
            [style.width]="width"
        >
            <span
                [class.btn]="!nest"
                [class.dropdown-item]="nest"
                [class.btn-lg]="size === 'large'"
                [class.btn-sm]="size === 'small'"
                [class.btn-primary]="type === 'primary'"
                [class.btn-success]="type === 'success'"
                [class.btn-warning]="type === 'warning'"
                [class.btn-danger]="type === 'danger'"
                [class.btn-info]="type === 'info'"
                (click)="leftButtonClick()"
                style="width:100%"
                *ngIf="splitButton"
                >{{ title }}</span
            >
            <span
                class="dropdown-toggle"
                [class.btn]="!nest"
                [class.dropdown-item]="nest"
                [class.dropdown-toggle-split]="splitButton"
                [class.btn-lg]="size === 'large'"
                [class.btn-sm]="size === 'small'"
                [class.btn-primary]="type === 'primary'"
                [class.btn-success]="type === 'success'"
                [class.btn-warning]="type === 'warning'"
                [class.btn-danger]="type === 'danger'"
                [class.btn-info]="type === 'info'"
                [class.btn-secondary]="type === 'secondary'"
                (click)="showDropMenu($event)"
                (mouseenter)="hoverDropdown()"
                (mouseleave)="hoverDropdown()"
                style="width:100%"
            >
                <span class="sr-only" *ngIf="splitButton"></span>
                {{ splitButton ? '' : title }}
            </span>
            <div class="dropdown-menu" [class.show]="show">
                <ng-template [ngTemplateOutlet]="dropdownTempl"></ng-template>
                <farris-dropdown-item
                    *ngFor="let item of model"
                    [model]="item"
                    (select)="selectItem($event)"
                >
                </farris-dropdown-item>
            </div>
        </div>
    `
})
export class FarrisDropdownComponent implements OnInit, AfterViewInit, OnDestroy {
    @Input() nest: boolean;
    // 设置宽 高属性
    _width: string | number;
    _height: string | number;
    @Input()
    get width() {
        // 对各个单位进行处理
        return this._width;
    }
    set width(width: any) {
        this._width = this.resolveSize(width);
    }
    // 下拉框标题
    @Input() title: string;
    // hover展示下拉列表
    @Input() hover: boolean;
    // 下拉框尺寸
    @Input() size: string;
    // 下拉框类型
    // tslint:disable-next-line:no-inferrable-types
    @Input() type: string = 'primary';
    // 点击列表项目后是否关闭列表项
    // tslint:disable-next-line:no-input-rename
    // tslint:disable-next-line:no-inferrable-types
    @Input('hide-on-click') hideOnClick: boolean = true;
    // 按钮组
    // tslint:disable-next-line:no-input-rename
    @Input('split-button') splitButton = false;
    // 列表显示位置
    @Input() position = 'bottom';
    // 列表项数据
    @Input() model: DropdownItem[] = [
        { label: '项目一', value: 'asdasd' },
        { label: '项目二', value: 'asdasd' },
        { label: '项目三', value: 'asdasd' }
    ];
    @ContentChild('dropdownTempl') dropdownTempl: TemplateRef<any>;
    // 按钮分组之后  左边按钮事件
    // tslint:disable-next-line:no-output-rename
    @Output('left-click') leftClick: EventEmitter<any> = new EventEmitter<
        any
    >();
    @Output() select: EventEmitter<any> = new EventEmitter<any>();
    // 下拉列表显示或者隐藏触发的事件
    // tslint:disable-next-line:no-output-rename
    @Output('visible-change') visibleChange: EventEmitter<
        any
    > = new EventEmitter<any>();
    dropdownButton: HTMLButtonElement;
    menu: HTMLDivElement;
    // 列表项的显示与否
    show = false;
    globalListenFunc: Function;
    menuListenFunc: Function;
    constructor(private el: ElementRef, private renderer: Renderer2) {}
    ngOnInit(): void {
        this.menu = this.el.nativeElement.querySelector('.dropdown-menu');
    }
    ngAfterViewInit(): void {}
    ngOnDestroy(): void {
        if (this.globalListenFunc) {
            this.globalListenFunc();
        }
    }
    // 点击列表项显示与否
    showDropMenu(event?: Event) {
        if (this.hover) {
            return;
        }
        if (event) {
            event.stopPropagation();
        }
        this.show = !this.show;
        this.visibleChange.emit();

        this.globalListenFunc = this.renderer.listen(
            'document',
            'click',
            () => {
                this.closeDropMenu();
            }
        );
        // 如果不设置hide-on-click,则说明点击下拉之后下拉不消失
        if (!this.hideOnClick) {
            this.menuListenFunc = this.renderer.listen(
                this.menu,
                'click',
                e => {
                    e.stopPropagation();
                }
            );
        }
    }
    // 点击元素之外  列表项消失
    closeDropMenu() {
        if (this.hover) {
            return;
        }
        this.show = false;
        this.visibleChange.emit();
        // 解除事件绑定
        if (this.globalListenFunc) {
            this.globalListenFunc();
        }
        if (this.menuListenFunc) {
            this.menuListenFunc();
        }
    }
    // hover 实现
    hoverDropdown() {
        if (!this.hover) {
            return;
        }
        this.show = !this.show;
        this.visibleChange.emit();
    }
    /**
     * 弹出事件
     */
    selectItem(model) {
        this.select.emit(model);
    }
    leftButtonClick() {
        this.leftClick.emit();
    }
    resolveSize(size) {
        const regex = /px|em|rem|pt|%/;
        // 说明是字符串
        return regex.test(size)
            ? `${parseInt(size, 10)}${size.match(regex)[0]}`
            : `${size}px`;
    }
}