import { Animation, Transition } from 'ionic-angular';

/**
 * Animations for loading
 */
export class LoadingCoverPopIn extends Transition {
  init() {
    let ele = this.enteringView.pageRef().nativeElement;
    let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
    let wrapper = new Animation(this.plt, ele.querySelector('.loading-wrapper'));

    wrapper.fromTo('opacity', 1, 1);
    backdrop.fromTo('opacity', 1, 1);

    this
      .easing('ease-in-out')
      //.duration(200)
      .add(backdrop)
      .add(wrapper);
  }
}


export class LoadingCoverPopOut extends Transition {
  init() {
    let ele = this.leavingView.pageRef().nativeElement;
    let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
    let wrapper = new Animation(this.plt, ele.querySelector('.loading-wrapper'));

    wrapper.fromTo('opacity', 0.99, 0);
    backdrop.fromTo('opacity', 0.99, 0);

    this
      .easing('ease-in-out')
      .duration(500)
      .add(backdrop)
      .add(wrapper);
  }
}


/**
 * Animations for loading
 */
export class LoadingPopIn extends Transition {
  init() {
    let ele = this.enteringView.pageRef().nativeElement;
    let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
    let wrapper = new Animation(this.plt, ele.querySelector('.loading-wrapper'));

    wrapper.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
    backdrop.fromTo('opacity', 0.01, 0.3);

    this
      .easing('ease-in-out')
      .duration(200)
      .add(backdrop)
      .add(wrapper);
  }
}


export class LoadingPopOut extends Transition {
  init() {
    let ele = this.leavingView.pageRef().nativeElement;
    let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
    let wrapper = new Animation(this.plt, ele.querySelector('.loading-wrapper'));

    wrapper.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
    backdrop.fromTo('opacity', 0.3, 0);

    this
      .easing('ease-in-out')
      .duration(400)
      .add(backdrop)
      .add(wrapper);
  }
}