import { Component, EventEmitter, Output, ViewChild, Renderer } from '@angular/core';
import { NavParams,Platform, NavController } from 'ionic-angular'
import { KeyboardOption } from '../type'

const defaultOption: KeyboardOption = {type:'social'}

// "SESSION":0,"TIMELINE":1,"FAVORITE":2
@Component({
  selector: 'keyboard-social',
  template: `
  <div class="wd-100 flex items-center flex-around bdt"
   style="height:120px;background-color:#fefefe;">
    <a (click)="confirm(0)" class="block text-center">
      <div class="mb">
         <img src="assets/images/public/icon-wechat.png" style="height:30px;">
      </div>
      <div class="">微信好友</div>
    </a>
    <a (click)="confirm(1)" class="block text-center">
      <div class="mb">
         <img src="assets/images/public/icon-friend.png" style="height:30px;">
      </div>
      <div class="">微信朋友圈</div>
    </a>
    <a (click)="confirm(2)" class="block text-center">
      <div class="mb">
         <img src="assets/images/public/icon-favority.png" style="height:30px;">
      </div>
      <div class="">微信收藏</div>
    </a>
  </div>
  <button (click)="close()"
  style="padding-bottom: 15px;padding-bottom: calc(15px + constant(safe-area-inset-bottom));padding-bottom: calc(15px + env(safe-area-inset-bottom));"
   class="wd-100 text-center bdt bg-white pt-px-15 f16">取消</button>
`,
  providers:[]
})
export class KeyboardSocialComponent {
  option: KeyboardOption = defaultOption;
  type:string
  values = []
  @ViewChild('back') back
  constructor(
    params: NavParams,
    public platform:Platform,
    public navCtrl:NavController,
    public renderer:Renderer
  ) {
    this.option = Object.assign({},this.option,params.data);
    this.type = this.option.type;
  }

  onPresent = () => {
    this.bindEvents();
  }

  // 确认事件
  @Output() confirmEvent = new EventEmitter();
  confirm = (value) => {
    this.confirmEvent.emit(value);
    this.unBindEvents();
  }

  // 取消事件
  @Output() cancelEvent = new EventEmitter();
  close = () => {
    this.cancelEvent.emit(this.option.input.value);
    this.unBindEvents();
  }

  // 点击背景关闭弹窗
  closeByBackdrop = (event) => {
    if(event.target['offsetParent'] && event.target['offsetParent'].className == 'keyboard-wrapper') return;
    const className = event.target['className'];
    if(className.indexOf('back-button') == -1) this.cancelEvent.emit(this.option.input.value);
    this.unBindEvents();
  }

  bindEvents = () => {
    this.platform.doc().addEventListener('touchstart', this.closeByBackdrop);
    this.platform.doc().addEventListener('touchmove', this.disableScroll); //锁住滚动
  }

  unBindEvents = () => {
    this.platform.doc().removeEventListener('touchstart', this.closeByBackdrop);
    this.platform.doc().removeEventListener('touchmove', this.disableScroll);
  }

  disableScroll = (e) => {
    e.preventDefault();
    e.stopPropagation();
  }
}