import { Injectable } from '@angular/core';
import { Animation } from '@ionic/core';

@Injectable({
  providedIn: 'root'
})
export class AnimationsService {
  modalLeave(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> {
    const baseAnimation = new AnimationC();

    const backdropAnimation = new AnimationC();
    backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));

    const wrapperAnimation = new AnimationC();
    const wrapperEl = baseEl.querySelector('.modal-wrapper');
    wrapperAnimation.addElement(wrapperEl);
    const wrapperElRect = wrapperEl!.getBoundingClientRect();

    wrapperAnimation
      .beforeStyles({
        opacity: 1
      })
      .fromTo('transform', 'translateX(0%)', 'translateX(100%)')
      .fromTo('opacity', 1, 0)
      .fromTo('-webkit-backdrop-filter', 'blur(7px)', 'blur(0px)');

    return Promise.resolve(
      baseAnimation
        .addElement(baseEl)
        .easing('ease-in')
        .duration(150)
        .add(backdropAnimation)
        .add(wrapperAnimation)
    );
  }

  modalEnter(AnimationC: Animation, baseEl: HTMLElement): Promise<Animation> {
    const baseAnimation = new AnimationC();

    const backdropAnimation = new AnimationC();
    backdropAnimation.addElement(baseEl.querySelector('ion-backdrop'));

    const wrapperAnimation = new AnimationC();
    const wrapperEl = baseEl.querySelector('.modal-wrapper');
    wrapperAnimation.addElement(wrapperEl);

    wrapperAnimation
      .beforeStyles({
        opacity: 1
      })
      .fromTo('transform', 'translateX(100%)', 'translateX(0%)')
      .fromTo('opacity', 0, 1)
      .fromTo('-webkit-backdrop-filter', 'blur(0px)', 'blur(7px)');

    return Promise.resolve(
      baseAnimation
        .addElement(baseEl)
        .easing('ease-in')
        .duration(150)
        .add(wrapperAnimation)
    );
  }
}