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

export const shrinkTitleAnimation = trigger('shrinkTitle', [
  state(
    'false',
    style({
      fontSize: '20px',
      fontWeight: 'bold',
      color: 'rgba(90, 114, 138, 1)',
      lineHeight: '21px',
      height: '20px',
      zIndex: '30',
      textAlign: 'center',
      cursor: 'pointer',
    })
  ),
  state(
    'true',
    style({
      fontSize: '20px',
      fontWeight: 'bold',
      color: 'rgba(0, 0, 0, 1)',
      lineHeight: '21px',
      transform: 'scale(1.3)',
      height: '20px',
      zIndex: '30',
    })
  ),
  transition('true => false', [
    style({
      color: 'rgba(90, 114, 138, 1)',
      transform: 'scale(1.3)',
      fontSize: '20px',
      fontWeight: 'bold',
      lineHeight: '21px',
    }),
    animate(
      '300ms ease-in',
      style({
        fontSize: '20px',
        fontWeight: 'bold',
        color: 'rgba(90, 114, 138, 1)',
        lineHeight: '21px',
        transform: 'scale(1)',
      })
    ),
  ]),
  transition('false => true', [
    style({
      fontSize: '20px',
      fontWeight: 'bold',
      color: 'rgba(90, 114, 138, 1)',
      lineHeight: '21px',
      transform: 'scale(1)',
    }),
    animate('300ms ease-out', style({ transform: 'scale(1.3)', color: 'rgba(0, 0, 0, 1)' })),
  ]),
]);

export const shrinkMainCard = trigger('shrinkMainCard', [
  state(
    'true',
    style({
      height: 'calc(100% - 120px)',
      backgroundColor: '#fff',
    })
  ),
  state(
    'false',
    style({
      height: '20px',
      borderRadius: '4px 4px 0 0',
      backgroundColor: '#fff',
    })
  ),
  transition('false => true', [
    style({
      height: '20px',
      width: '100%',
    }),
    group([
      style({ height: '*' }),
      animate(
        '300ms ease-out',
        style({
          height: 'calc(100% - 120px)',
          backgroundColor: '#fff',
        })
      ),
      query('@shrinkTitle', [animateChild()]),
    ]),
  ]),
  transition('true => false', [
    group([
      animate(
        '300ms ease-in',
        style({
          width: '100%',
        })
      ),
      query('@shrinkTitle', [animateChild()]),
    ]),
  ]),
]);

export const shrinkSecondaryAnimation = trigger('shrinkSecondary', [
  state(
    'true',
    style({
      backgroundColor: '#fff',
      bottom: '100px',
      overflowY: 'scroll',
    })
  ),
  state(
    'false',
    style({
      visibility: 'visible',
      height: '16px',
      overflow: 'hidden',
      bottom: '80px',
      backgroundColor: '#fff',
    })
  ),
  transition('false => true', [animate('300ms ease-out')]),
  transition('true => false', [
    style({
      visibility: 'visible',
      overflow: 'hidden',
      bottom: '80px',
      height: '*',
    }),
    animate('320ms ease-out'),
  ]),
]);
