import { Component, ComponentFactoryResolver, ElementRef, Renderer, ViewChild, ViewContainerRef,Renderer2 } from '@angular/core';
import { App,BlockerDelegate,ViewController,NavParams,NavOptions,GestureController,GESTURE_MENU_SWIPE,GESTURE_GO_BACK_SWIPE,Config} from 'ionic-angular'
import { ModalSlideIn, ModalSlideOut } from '../transition'

import { BaseLog as Log } from 'base-log';
const log = new Log('KeyboardComponent');

@Component({
  selector: 'keyboard',
  template:`
<ion-backdrop *ngIf="_enableBackdrop" (click)="_bdClick()" [class.backdrop-no-tappable]="!_bdDismiss"></ion-backdrop>
<div class="keyboard-root">
  <div class="keyboard-wrapper">
    <div #viewport></div>
  </div>
</div>
`
})
export class KeyboardComponent {
  @ViewChild('viewport', { read: ViewContainerRef }) _viewport: ViewContainerRef;

  _bdDismiss: boolean;
  _enabled: boolean;
  _gestureBlocker: BlockerDelegate;
  instance
  _isOpen:boolean
  _enableBackdrop
  constructor(
    public _cfr: ComponentFactoryResolver,
    public _renderer: Renderer,
    public _navParams: NavParams,
    public _viewCtrl: ViewController,
    gestureCtrl: GestureController,
    config: Config,
    public renderer:Renderer2,
    public elementRef:ElementRef,
    public app:App
  ) {
    config.setTransition('modal-slide-in',ModalSlideIn); // 导入弹入动画
    config.setTransition('modal-slide-out',ModalSlideOut);// 导入弹出动画

    let opts = _navParams.get('opts') || {};
    // log.info('keyboard opts',opts);
    this._gestureBlocker = gestureCtrl.createBlocker({
      disable: [GESTURE_MENU_SWIPE, GESTURE_GO_BACK_SWIPE] // 后退和菜单禁止手势
    });

    // 背景处理
    this._bdDismiss = opts.enableBackdropDismiss;
    this._enableBackdrop = opts.enableBackdrop;
    if(this._enableBackdrop){
      this.renderer.addClass(elementRef.nativeElement,'enableBackdrop');
    }else{
      this.renderer.removeClass(elementRef.nativeElement,'enableBackdrop');
    }
  }

  // == 预加载
  ionViewPreLoad() {
    this._load(this._navParams.data.component);
  }

  ngOnInit(){
    /*this.app.viewWillEnter.subscribe((view) => {
      const route = Route.getRoute(view.name);
      if(route) this._dismiss('route',null);
    });*/
  }

  // == 加载子组件
  _load(component: any) {
    if (component) {
      // == 创建dom
      const componentFactory = this._cfr.resolveComponentFactory(component);
      const componentRef = this._viewport.createComponent(componentFactory, this._viewport.length, this._viewport.parentInjector, []);
      this._viewCtrl._setInstance(componentRef.instance);
      this.instance = componentRef.instance;

      this._enabled = true;// dom创建后才开放dismiss等事件
      this._viewCtrl.willEnter.subscribe(this._viewWillEnter.bind(this));
      this._viewCtrl.didLeave.subscribe(this._viewDidLeave.bind(this));
      this._addComponentEvents();
    }
  }

  _viewWillEnter() {
    this._gestureBlocker.block();
  }


  // 添加组件事件
  _addComponentEvents = () => {
    // 点击确定按钮事件
    if(this.instance.confirmEvent){
      this.instance.confirmEvent.subscribe((value) =>{
        this._dismiss(true,value);
      });
    }

    // 点击取消按钮事件
    if(this.instance.cancelEvent){
      this.instance.cancelEvent.subscribe((value) =>{
        this._dismiss(false,value);
      });
    }
  }

  _viewDidLeave() {
    this._gestureBlocker.unblock();
  }

  // 背景点击
  _bdClick() {
    if(!this._bdDismiss) return;
    this._dismiss(null,null, 'backdrop');
  }

  // == 关闭弹窗
  _dismiss = (isOk,value,type?) => {
    if(!this._enabled) return;
    const option = this._navParams.data;
    const opts: NavOptions = { minClickBlockDuration: 400 };
    this._viewCtrl.dismiss(null, value, opts).catch(() => {});
    if(option.confirm) option.confirm(isOk, value, type);
  }

  ngOnDestroy() {
    if(this._gestureBlocker.blocked === false)
      log.info('gesture blocker must be already unblocked');
    this._gestureBlocker.destroy();
  }
}