import { Injectable } from '@angular/core';
import gsap from 'gsap';

@Injectable({
  providedIn: 'root',
})
export class ModalAnimationService {
  private readonly defaultDuration = 0.3;
  private readonly defaultEase = 'power2.out';

  openModal(modalElement: HTMLElement, overlayElement: HTMLElement) {
    gsap.set(overlayElement, { opacity: 0, display: 'block' });
    gsap.set(modalElement, {
      opacity: 0,
      scale: 0.95,
      y: 20,
      display: 'block',
    });

    gsap.to(overlayElement, {
      opacity: 1,
      duration: this.defaultDuration,
      ease: this.defaultEase,
    });

    gsap.to(modalElement, {
      opacity: 1,
      scale: 1,
      y: 0,
      duration: this.defaultDuration,
      ease: this.defaultEase,
    });
  }

  closeModal(modalElement: HTMLElement, overlayElement: HTMLElement, onComplete?: () => void) {
    gsap.to([overlayElement, modalElement], {
      opacity: 0,
      duration: this.defaultDuration,
      ease: this.defaultEase,
      onComplete: () => {
        gsap.set([overlayElement, modalElement], { display: 'none' });
        onComplete?.();
      },
    });

    gsap.to(modalElement, {
      scale: 0.95,
      y: 20,
      duration: this.defaultDuration,
      ease: this.defaultEase,
    });
  }
}