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

const commonStyles = [style({ position: 'absolute', top: 0, left: 0, width: '100%' })];

const enterLeaveQueries = [
  query(':enter', [style({ left: '-100%' })], { optional: true }),
  query(':leave', animateChild(), { optional: true }),
];

const groupAnimations = (leaveDuration: string, enterDuration: string) =>
  group([
    query(':leave', [animate(leaveDuration, style({ left: '100%', opacity: 0 }))], { optional: true }),
    query(':enter', [animate(enterDuration, style({ left: '0%' }))], { optional: true }),
    query('@*', animateChild(), { optional: true }),
  ]);

export const slideInAnimation = trigger('routeAnimations', [
  transition('AuthPage <=> TaskPage', [
    style({ position: 'relative' }),
    query(':enter, :leave', commonStyles),
    ...enterLeaveQueries,
    groupAnimations('300ms ease-out', '300ms ease-out'),
  ]),
  transition('* <=> *', [
    style({ position: 'relative' }),
    query(':enter, :leave', commonStyles, { optional: true }),
    ...enterLeaveQueries,
    groupAnimations('200ms ease-out', '300ms ease-out'),
  ]),
]);
