import { ChangeDetectionStrategy, Input, Component,Optional, ViewChild, ElementRef, AfterViewChecked, AfterViewInit, OnDestroy } from '@angular/core';
import { PopoverConfig } from './popover.config';
import { isBs3 } from '@farris/ui-modal/utils';
import { Observable, Subject } from 'rxjs';

@Component({
  selector: 'farris-popover',
  changeDetection: ChangeDetectionStrategy.OnPush,
  // tslint:disable-next-line
  host: {
    '[class]':
      '"popover in popover-" + placement + " " + "bs-popover-" + placement + " " + placement + " " + containerClass',
    '[class.show]': '!isBs3',
    '[class.bs3]': 'isBs3',
    role: 'tooltip',
    style: 'display:block;'
  },
  styles: [
    `
    :host.bs3.popover-top {
      margin-bottom: 10px;
    }
    :host.bs3.popover.top>.arrow {
      margin-left: -2px;
    }
    :host.bs3.popover.top {
      margin-bottom: 10px;
    }
    :host.popover.bottom>.arrow {
      margin-left: -4px;
    }
    :host.bs3.bs-popover-left {
      margin-right: .5rem;
    }
    :host.bs3.bs-popover-right .arrow, :host.bs3.bs-popover-left .arrow{
      margin: .3rem 0;
    }
    :host.arrow-left .arrow {
        left: calc(50% - 10px);
    }
    `
  ],
  templateUrl: './popover-container.component.html'
})
export class PopoverContainerComponent implements AfterViewInit, OnDestroy {
  @ViewChild('innerEle', { read: ElementRef }) innerNode: ElementRef;
  @Input() placement: string;
  @Input() title: string;
  containerClass: string;
  private mouseenterEvent: any;
  private mouseleaveEvent: any;
  private mounseState = new Subject<boolean>();

  get isBs3(): boolean {
    return isBs3();
  }

  constructor(config: PopoverConfig,@Optional() private el:ElementRef) {
    Object.assign(this, config);
  }

  ngAfterViewInit() {
    if (this.el) {
      this.mouseenterEvent = this.changeMouseState.bind(this, true);
      this.mouseleaveEvent = this.changeMouseState.bind(this, false);
      this.el.nativeElement.addEventListener('mouseenter', this.mouseenterEvent);
      this.el.nativeElement.addEventListener('mouseleave', this.mouseleaveEvent);
    }
  }
  /**
   * 获取鼠标变化状态
   */
  getMouseState(){
    return this.mounseState;
  }
  /**
   * 绑定的事件
   * @param state 
   */
  private changeMouseState(state) {
    this.mounseState.next(state);
  }

  ngOnDestroy() {
    if (this.mouseenterEvent) {
      this.el.nativeElement.removeEventListener('mouseenter', this.mouseenterEvent);
    }
    if (this.mouseleaveEvent) {
      this.el.nativeElement.removeEventListener('mouseleave', this.mouseleaveEvent);
    }
    this.mounseState.unsubscribe();
  }
}