import { Injectable } from '@angular/core';
import { Config, Loading as LoadingCmp, LoadingController, LoadingOptions } from 'ionic-angular';
import { LoadingPopIn,LoadingPopOut,LoadingCoverPopIn,LoadingCoverPopOut} from './loading-transitions'

import { Log } from "../utils/log";
const log = new Log('Loading');

interface LoadingConfig extends LoadingOptions{
  area?:any
}

let loading,loadingAlone,isPresent,count = 0,timer;// 单例

@Injectable()
export class Loading {
  //loading: any
  private defaultOption: LoadingConfig
  //locked

  constructor(
    public loadingCtrl: LoadingController,
    public config:Config
  ) {
    this.defaultOption = {
      dismissOnPageChange: true,
      duration: 10000,
      spinner: 'hide'
    }
  }

  showAlone = (text?:string | boolean, duration:number = 10000, opt?,reset?) =>{
    if(typeof text == 'boolean' && !text) return false;

    let option: LoadingConfig = this.filterOption(opt);
    const content = this.getContent(text);
    option = Object.assign({}, this.defaultOption, {content, duration}, option);

    loadingAlone = this.loadingCtrl.create(option);
    this.config.setTransition('loading-pop-in',LoadingPopIn);
    this.config.setTransition('loading-pop-out',LoadingPopOut);
    log.info('loadingAlone present...'); // 打开loading大概需要300-800毫秒
    return loadingAlone.present();
  }

  hideAlone = () =>{
    log.info('loadingAlone dismiss...');
    loadingAlone.dismiss().catch(() => {});
    loadingAlone = null;
  }


  show = (text?:string | boolean, duration:number = 10000, opt?) => {
    if(loading) this.close();
    if(typeof text == 'boolean' && !text) return false;

    let option: LoadingConfig = this.filterOption(opt);
    const content = this.getContent(text);
    option = Object.assign({}, this.defaultOption, {content, duration}, option);

    loading = this.loadingCtrl.create(option);
    this.config.setTransition('loading-pop-in',LoadingPopIn);
    this.config.setTransition('loading-pop-out',LoadingPopOut);
    this.reset();
    log.info('loading presenting...'); // 打开loading大概需要300-800毫秒
    loading.present().then(()=>{
      isPresent = true;
      log.info('loading is ready');
    });
  }

  // 显示遮盖
  /*showCover = (text?,delay:number = 0, opt?) => {
    if(loading) this.close();
    if(typeof text == 'boolean' && !text) return false;
    let option: LoadingConfig = this.filterOption(opt);

    const content = this.getContent(text);

    option = Object.assign({}, this.defaultOption, {
      content,
      cssClass:'loading-cover'
    }, option);

    loading = this.loadingCtrl.create(option);
    this.config.setTransition('loading-pop-in',LoadingCoverPopIn);
    this.config.setTransition('loading-pop-out',LoadingCoverPopOut);
    this.reset();
    loading.present().then(()=>{
      isPresent = true;
    });
  }*/

  reset = () => {
    isPresent = false;
    count = 0;
    if(timer) clearTimeout(timer);
  }

  /**
   * 隐藏loading
   * 先判断loading是否开启（组件是否已渲染），如果还没开启则循环多次判断是否开启，开启后执行关闭
   * 如果循环多次还未发现开启则将count置为0，等待下次hide方法的调用重新判断是否开启
   */
  hide = () =>{
    if(!loading) return;
    log.info('hide','isPresent:' + isPresent + ' count:' + count);
    if(isPresent){
      this.close();
    }else if(count < 5){ // 循环检测是否可关闭
      timer = setTimeout(()=>{
        count ++ ;
        this.hide();
      },300);
    }else{
      count = 0;
    }
  }

  close = () => {
    if(loading && loading.dismiss)
      loading.dismiss().catch(() => {});
    loading = null;
  }

  closeAll = () => {
    loading.dismissAll();
    loading = null;
  }

  // 获取loading内容
  getContent = (content) => {
    return "<div class='t4 text-center opacity-8'" +
      " style='width:66px;height:66px;'><div><img src='assets/images/public/loading.gif' class='mb' height='40px'></div><div class='nowrap'>"
      + (content && content !='true' && content !=true ? content :  '加载中') +
      "</div></div>";
  }

  // 过滤字符串参数
  filterOption = (opts) => {
    if(typeof opts == 'string'){
      if(opts == 'cover') {
        return {
          cssClass: 'loading-cover'
        }
      }else if(opts == 'cover|noHeader'){
        return {
          cssClass: 'loading-cover noHeader'
        }
      }else if(opts == 'cover|noNavMenu') {
        return {
          cssClass: 'loading-cover noNavMenu'
        }
      }else if(opts == 'cover|middle'){
        return {
          cssClass: 'loading-cover middle'
        }
      }else{
        return {}
      }
    }else{
      return opts || {};
    }
  }
}