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

export const cardComponentAnimation = (type: string, mt: string = '0px', mb: string = '0px') =>
    trigger(type, [
        state('true', style({
            height: '*',
            overflow: 'visible',
            opacity: 1,
            'margin-top': mt,
            'margin-bottom': mb,
            transform: 'translateY(0)',
        })),
        state('false', style({
            height: '0px',
            overflow: 'hidden',
            opacity: 0,
            'margin-top': '0px',
            'margin-bottom': '0px',
            transform: 'translateY(-20px)', 
        })),
        transition(':enter', [
            animate(
                '200ms ease-in-out',
                keyframes([
                    style({
                        opacity: 0,
                        height: '0px',
                        transform: 'translateY(-20px)',
                        offset: 0
                    }),
                    style({
                        opacity: 0.5,
                        height: '10px',
                        transform: 'translateY(10px)',
                        offset: 0.5
                    }),
                    style({
                        opacity: 1,
                        height: '*',
                        transform: 'translateY(0)',
                        offset: 1
                    })
                ])
            )
        ]),
        transition(':leave', [
            animate(
                '200ms ease-in-out',
                keyframes([
                    style({
                        opacity: 1,
                        height: '*',
                        transform: 'translateY(0)',
                        offset: 0
                    }),
                    style({
                        opacity: 0.5,
                        height: '10px',
                        transform: 'translateY(-10px)', 
                        offset: 0.5
                    }),
                    style({
                        opacity: 0,
                        height: '0px',
                        transform: 'translateY(-20px)', 
                        offset: 1
                    })
                ])
            )
        ])
    ]);