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

@Component({
 selector: 'app-auth-wrapper',
 template: `
 <div class="card-swipe-container" [@cardSwipe]="cardState">
 <app-sign-in
 *ngIf="cardState === 'signin'"
 [cardState]="cardState"
 (switchToSignUp)="switchToSignUp()"
 ></app-sign-in>
 <app-sign-up
 *ngIf="cardState === 'signup'"
 [cardState]="cardState"
 (switchToSignIn)="switchToSignIn()"
 ></app-sign-up>
 </div>
 `,
 styleUrls: ['./auth-wrapper.component.css'],
 animations: [
 trigger('cardSwipe', [
 state('signup', style({ transform: 'translateX(0%)' })),
 state('signin', style({ transform: 'translateX(-100%)' })),
 transition('signup <=> signin', [
 animate('400ms cubic-bezier(.25,.8,.25,1)')
 ]),
 ])
 ]
})
export class AuthWrapperComponent {
 cardState: 'signup' | 'signin' = 'signin';

 switchToSignUp() { this.cardState = 'signup'; }
 switchToSignIn() { this.cardState = 'signin'; }
}