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: '60px',
      zIndex: '30',
      textAlign: 'center',
      cursor: 'pointer',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    })
  ),
  state(
    'true',
    style({
      fontSize: '20px',
      fontWeight: 'bold',
      color: 'rgba(0, 0, 0, 1)',
      lineHeight: '21px',
      transform: 'scale(1.3)',
      position: 'absolute',
      zIndex: 32,
      textAlign: 'center',
      width: '100%',
      height: '80px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'white',
      boxShadow: '0 19px 25px -8px #fff',
    })
  ),
  transition('true => false', [
    style({
      fontSize: '20px',
      fontWeight: 'bold',
      color: 'rgba(0, 0, 0, 1)',
      lineHeight: '21px',
      transform: 'scale(1.3)',
      position: 'absolute',
      zIndex: 32,
      textAlign: 'center',
      width: '100%',
      height: '80px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'white',
      boxShadow: '0 19px 25px -8px #fff',
    }),
    animate(
      '300ms ease-in',
      style({
        height: '60px',
        width: '100%',
        fontSize: '20px',
        fontWeight: 'bold',
        color: 'rgba(90, 114, 138, 1)',
        lineHeight: '21px',
        transform: 'scale(1)',
      })
    ),
  ]),
  transition('false => true', [
    style({
      width: '50%',
      margin: 'auto',
      fontSize: '20px',
      fontWeight: 'bold',
      color: 'rgba(90, 114, 138, 1)',
      lineHeight: '21px',
      transform: 'scale(1)',
      height: '80px',
      left: '25%',
      position: 'absolute',
    }),
    animate('300ms ease-out', style({ transform: 'scale(1.3)', color: 'rgba(0, 0, 0, 1)' })),
  ]),
]);

export const shrinkMainCard = trigger('shrinkMainCard', [
  state(
    'true',
    style({
      backgroundColor: '#fff',
      width: '100%',
      // borderRadius: '4px 4px 0 0',
      borderRadius: '4px 4px 4px 4px',
      fontFamily: 'Open Sans',
      lineHeight: '21px',
      // height: 'calc(100% - 40px)', When we add recommendations back
      height: '100%',
      overflowY: 'scroll',
      overflowX: 'hidden',
      boxShadow: '0px -2px 24px 0px #dce2e9',
      zIndex: 30,
      position: 'relative',
    })
  ),
  state(
    'false',
    style({
      display: 'block',
      height: '60px',
      borderRadius: '4px 4px 0 0',
      backgroundColor: '#fff',
      cursor: 'pointer',
      boxShadow: '0px -2px 24px 0px #dce2e9',
      position: 'relative',
      marginBottom: '120px',
    })
  ),
  transition('false => true', [
    style({
      boxShadow: '0px -2px 24px 0px #dce2e9',
      height: '60px',
      marginBottom: '120px',
    }),
    group([
      animate(
        '300ms ease-in',
        style({
          marginBottom: '120px',
          boxShadow: '0px -2px 24px 0px #dce2e9',
          display: 'block',
          height: 'calc(100% - 70px)',
          backgroundColor: '#fff',
          borderRadius: '4px',
        })
      ),
      query('@shrinkTitle', [animateChild()]),
    ]),
  ]),
  transition('true => false', [
    style({
      position: 'relative',
      display: 'flex',
      justifyContent: 'flex-start',
      flexDirection: 'column',
      alignItems: 'center',
      boxShadow: '0px -2px 24px 0px #dce2e9',
    }),
    group([
      animate(
        '300ms ease-in',
        style({
          height: '60px',
          borderRadius: '4px',
        })
      ),
      query('@shrinkTitle', [animateChild()]),
    ]),
  ]),
]);

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