ionic.leave.ts

import { createAnimation } from '@utils/animation/animation';
import { getElementRoot } from '@utils/helpers';

import type { Animation } from '../../../interface';
import type { ModalAnimationOptions } from '../modal-interface';

import { createSheetLeaveAnimation } from './sheet';

const createLeaveAnimation = () => {
  const backdropAnimation = createAnimation().fromTo('opacity', 'var(--backdrop-opacity)', 0);

  const wrapperAnimation = createAnimation().keyframes([
    { offset: 0, opacity: 0.99, transform: `translateY(0px)` },
    { offset: 1, opacity: 0, transform: 'translateY(40px)' },
  ]);

  return { backdropAnimation, wrapperAnimation };
};

/**
 * Md Modal Leave Animation
 */
export const ionicLeaveAnimation = (baseEl: HTMLElement, opts: ModalAnimationOptions): Animation => {
  const { currentBreakpoint } = opts;
  const root = getElementRoot(baseEl);
  const { wrapperAnimation, backdropAnimation } =
    currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation();

  backdropAnimation.addElement(root.querySelector('ion-backdrop')!);
  wrapperAnimation.addElement(root.querySelector('.modal-wrapper')!);

  backdropAnimation.duration(250).easing('ease-in');
  wrapperAnimation.duration(400).easing('cubic-bezier(0.4, 0, 1, 1)');

  const baseAnimation = createAnimation().addElement(baseEl).addAnimation([backdropAnimation, wrapperAnimation]);

  return baseAnimation;
};