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: '40px',
      padding: '0',
      textAlign: 'center',
      position: 'relative',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      margin: 0,
    })
  ),
  state(
    'true',
    style({
      height: '40px',
      display: 'block',
      textAlign: 'center',
      fontSize: '26px',
      fontWeight: 'bold',
      color: 'rgba(0, 0, 0, 1)',
      margin: '10px 0 0 0',
      position: 'relative',
      lineHeight: '21px',
    })
  ),
  transition('true => false', [
    style({
      margin: 0,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      height: '40px',
      color: 'rgba(90, 114, 138, 1)',
      fontSize: '26px',
      fontWeight: 'bold',
      lineHeight: '21px',
    }),
    animate('300ms ease-in'),
  ]),
  transition('false => true', [
    style({
      display: 'block',
      margin: '10px 0 0 0',
      position: 'relative',
      height: '40px',
      fontSize: '26px',
      fontWeight: 'bold',
      color: 'rgba(0, 0, 0, 1)',
      lineHeight: '21px',
    }),
    animate('200ms ease-in'),
  ]),
]);

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

export const shrinkSecondaryAnimation = trigger('shrinkSecondary', [
  state(
    'true',
    style({
      backgroundColor: '#fff',
      height: 'calc(100% - 350px)',
      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', style({ height: 'calc(100% - 350px)' }))]),
  transition('true => false', [
    style({
      position: 'relative',
      visibility: 'visible',
      overflow: 'hidden',
      bottom: '100px',
      height: 'calc(100% - 350px)',
    }),
    animate('300ms ease-in', style({ height: '*' })),
  ]),
]);
