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

// -----------------------------------------------------------------------------------------------------
// @ Shake
// -----------------------------------------------------------------------------------------------------
const shake = trigger('shake',
    [

        // Prevent the transition if the state is false
        transition('void => false', []),

        // Transition
        transition('void => *, * => true',
            [
                animate('{{timings}}',
                    keyframes([
                        style({
                            transform: 'translate3d(0, 0, 0)',
                            offset   : 0
                        }),
                        style({
                            transform: 'translate3d(-10px, 0, 0)',
                            offset   : 0.1
                        }),
                        style({
                            transform: 'translate3d(10px, 0, 0)',
                            offset   : 0.2
                        }),
                        style({
                            transform: 'translate3d(-10px, 0, 0)',
                            offset   : 0.3
                        }),
                        style({
                            transform: 'translate3d(10px, 0, 0)',
                            offset   : 0.4
                        }),
                        style({
                            transform: 'translate3d(-10px, 0, 0)',
                            offset   : 0.5
                        }),
                        style({
                            transform: 'translate3d(10px, 0, 0)',
                            offset   : 0.6
                        }),
                        style({
                            transform: 'translate3d(-10px, 0, 0)',
                            offset   : 0.7
                        }),
                        style({
                            transform: 'translate3d(10px, 0, 0)',
                            offset   : 0.8
                        }),
                        style({
                            transform: 'translate3d(-10px, 0, 0)',
                            offset   : 0.9
                        }),
                        style({
                            transform: 'translate3d(0, 0, 0)',
                            offset   : 1
                        })
                    ])
                )
            ],
            {
                params: {
                    timings: '0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955)'
                }
            }
        )
    ]
);

export { shake };