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

export const createHorizontalAnimation = (direction: string, duration: string = '200ms') => [
  state('in', style({ transform: 'translate(0, 0%)', opacity: 1 })),
  transition('void => *', [
    style({ opacity: 0, transform: `translate(${direction}60%, 0)` }),
    animate(duration, style({ opacity: 1, transform: 'translate(0, 0%)' })),
  ]),
  transition('* => void', [animate(duration, style({ opacity: 0, transform: `translate(${direction}60%, 0)` }))]),
];

const createVerticalAnimation = (direction: string) => [
  state('in', style({ transform: 'translate(0, 0%)', opacity: 1 })),
  transition('void => *', [
    style({ opacity: 0, transform: `translate(0, ${direction}60%)` }),
    animate('200ms cubic-bezier(0.35, 0, 0.25, 1)'),
  ]),
  transition('* => void', [
    animate('200ms cubic-bezier(0.35, 0, 0.25, 1)', style({ opacity: 0, transform: `translate(0, ${direction}60%)` })),
  ]),
];

export const horizontalInOut = trigger('horizontalInOut', createHorizontalAnimation(''));
export const horizontalInOutReverse = trigger('horizontalInOutReverse', createHorizontalAnimation('-'));
export const horizontalInOutRelative = trigger('horizontalInOutRelative', createHorizontalAnimation(''));
export const verticalInOutRelative = trigger('verticalInOutRelative', createVerticalAnimation('-'));

export const horizontalInOutCenter = trigger('horizontalInOutCenter', [
  state('in', style({ transform: 'translate(0, -50%)', opacity: 1 })),
  transition('void => *', [
    style({ opacity: 0, transform: 'translate(-60%, -50%)' }),
    animate('200ms cubic-bezier(0.35, 0, 0.25, 1)'),
  ]),
  transition('* => void', [
    animate('200ms cubic-bezier(0.35, 0, 0.25, 1)', style({ opacity: 0, transform: 'translate(-60%, -50%)' })),
  ]),
]);

export const scaleInOut = trigger('scaleInOut', [
  state('in', style({ transform: 'scale(1)', opacity: 1 })),
  transition('void => *', [style({ opacity: 0, transform: 'scale(0)' }), animate('200ms')]),
  transition('* => void', [style({ opacity: 0, transform: 'scale(0)' }), animate('200ms')]),
]);

export const horizontalInOutReverse300ms = trigger('horizontalInOutReverse300ms', [
  state('in', style({ transform: 'translate(0, 0%)', opacity: 1 })),
  transition('void => *', [
    style({ transform: `translate(-100%, 0)` }),
    animate('300ms cubic-bezier(0.35, 0, 0.25, 1)', style({ transform: 'translate(0, 0%)' })),
  ]),
  transition('* => void', [
    animate('300ms cubic-bezier(0.35, 0, 0.25, 1)', style({ transform: `translate(-100%, 0)` })),
  ]),
]);
