import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';

type AnimationDirection = 'Y' | 'X';

export function fadeAnimation(
  triggerName: string,
  direction: AnimationDirection = 'Y',
  distance: string = '30px',
  duration: string = '0.6s',
  delay: string = '0s'
) {
  const initialTransform = direction === 'Y' ? `translateY(${distance})` : `translateX(${distance})`;

  return trigger(triggerName, [
    state('false', style({ opacity: 0, transform: initialTransform })),
    state('true', style({ opacity: 1, transform: direction === 'Y' ? 'translateY(0)' : 'translateX(0)' })),
    transition('false => true', [
      animate(`${duration} ${delay} ease-out`)
    ])
  ]);
}

export const fadeInUp = fadeAnimation('fadeInUp', 'Y', '30px', '0.6s');
export const fadeInLeft = fadeAnimation('fadeInLeft', 'X', '-30px', '0.8s');
export const fadeInRight = fadeAnimation('fadeInRight', 'X', '30px', '0.8s');
export const fadeIn = fadeAnimation('fadeIn', 'Y', '0px', '0.5s'); // Y with 0px distance is just opacity fade
export const scaleIn = trigger('scaleIn', [
  state('false', style({ opacity: 0, transform: 'scale(0.9)' })),
  state('true', style({ opacity: 1, transform: 'scale(1)' })),
  transition('false => true', [
    animate('0.5s ease-out')
  ])
]);

export const staggeredFadeInUp = trigger('staggeredFadeInUp', [
  transition('false => true', [
    query('.anim-item', [
      style({ opacity: 0, transform: 'translateY(30px)' }),
      stagger('100ms', [
        animate('0.6s ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
      ])
    ], { optional: true })
  ])
]);
