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

export const shrinkTitleAnimation = trigger('shrinkTitle', [
  state(
    'false',
    style({
      display: 'none',
    })
  ),
  state(
    'true',
    style({
      display: 'block',
      textAlign: 'center',
      fontSize: '20px',
      fontWeight: 'bold',
      color: 'rgba(90, 114, 138, 1)',
      lineHeight: '21px',
      height: '40px',
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      padding: '0',
    })
  ),
  transition('true => false', [
    style({
      display: 'none',
    }),
    animate('300ms ease-in'),
  ]),
  transition('false => true', [
    style({
      display: 'block',
      fontSize: '20px',
      fontWeight: 'bold',
      color: 'rgba(90, 114, 138, 1)',
      lineHeight: '21px',
      height: '40px',
      padding: '0',
      textAlign: 'center',
      opacity: '0',
    }),
    animate('300ms ease-out', style({ opacity: '1' })),
  ]),
]);

export const shrinkMainCard = trigger('shrinkMainCard', [
  state(
    'true',
    style({
      height: 'calc(100% - 95px)',
      display: 'grid',
      gridTemplateColumns: 'auto',
      padding: '20px 0 0 0',
      borderRadius: '5px',
      backgroundColor: '#fff',
    })
  ),
  state(
    'false',
    style({
      height: '40px',
      borderRadius: '4px 4px 0 0',
      backgroundColor: '#fff',
      cursor: 'pointer',
    })
  ),
  transition('false => true', [
    style({
      padding: '20px 0 0 0',
      height: '40px',
      display: 'grid',
      gridTemplateColumns: 'auto',
    }),
    group([
      query('@shrinkTitle', [animateChild()]),
      animate(
        '300ms ease-out',
        style({
          height: 'calc(100% - 70px)',
          backgroundColor: '#fff',
          display: 'grid',
          gridTemplateColumns: 'auto',
          padding: '20px 0 0 0',
          borderRadius: '5px',
        })
      ),
    ]),
  ]),
  transition('true => false', [
    style({ height: 'calc(100% - 70px)', textAlign: 'center' }),
    group([
      animate(
        '300ms ease-in',
        style({
          display: 'grid',
          gridTemplateColumns: 'auto',
          padding: '20px 0 0 0',
          borderRadius: '5px',
        })
      ),
      query('@shrinkTitle', [animateChild()]),
    ]),
  ]),
]);

export const shrinkSecondaryAnimation = trigger('shrinkSecondary', [
  state(
    'true',
    style({
      backgroundColor: '#fff',
      height: 'calc(100% - 345px)',
      bottom: '100px',
      borderRadius: '4px',
      zIndex: 30,
    })
  ),
  state(
    'false',
    style({
      visibility: 'visible',
      height: '60px',
      // overflow: 'hidden',
      bottom: '78px',
      backgroundColor: '#fff',
      zIndex: 30,
      boxShadow: '0px -2px 18px 0px #dce2e9',
    })
  ),
  transition('false => true', [animate('300ms ease-out', style({ height: 'calc(100% - 345px)', bottom: '100px' }))]),
  transition('true => false', [
    style({
      position: 'relative',
      visibility: 'visible',
      // overflow: 'hidden',
      bottom: '78px',
      height: '*',
    }),
    animate('300ms', style({ height: '*' })),
  ]),
]);
