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

export const rotateInState = state('rotateIn', style({ opacity: 1, transform: 'rotate(0deg)' }));
export const rotateEnter = transition('* => rotateIn', [
  style({ opacity: 0, transform: 'rotate(5deg)' }),
  animate('400ms ease-in-out')
]);

export const rotateOutState = state('rotateOut', style({ opacity: 0, transform: 'rotate(5deg)' }));
export const rotateLeave = transition('rotateIn => rotateOut', [
  style({ opacity: 1, transform: 'rotate(0deg)' }),
  animate('400ms ease-in-out')
]);

export const rotateIn = trigger('rotateIn', [
  rotateEnter
]);

export const rotateOut = trigger('rotateOut', [
  rotateLeave
]);

export const rotateInOut = trigger('rotateInOut', [
  rotateEnter,
  rotateLeave
]);

const expandedStyle = { transform: 'rotate(90deg)' };
const collapsedStyle = { transform: 'rotate(0deg)' };

export const rotate = trigger('rotate',
  [
    state('expanded', style(expandedStyle)),
    state('collapsed', style(collapsedStyle)),
    transition('expanded <=> collapsed', [
      animate('200ms')
    ])

  ]);