import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, Input, OnInit } from '@angular/core';
import { BonusCardInfoDTO } from '@swagger/crm';

@Component({
  selector: 'page-card-template',
  templateUrl: 'card-template.component.html',
  styleUrls: ['card-template.component.scss'],
  animations: [
    trigger('cardFlip', [
      state(
        'front',
        style({
          transform: 'rotateY(0deg)',
        })
      ),
      state(
        'back',
        style({
          transform: 'rotateY(0deg)',
        })
      ),
      state(
        'flip',
        style({
          transform: 'rotateY(90deg)',
        })
      ),
      transition('front <=> flip', [animate('400ms')]),
      transition('back <=> flip', [animate('400ms')]),
    ]),
  ],
})
export class CardTemplateComponent implements OnInit {
  @Input() cardDetails: BonusCardInfoDTO;
  @Input() isCustomerCard: boolean;
  frontside: boolean;
  state: 'front' | 'flip' | 'back' = 'front';

  constructor() {}

  ngOnInit() {
    this.frontside = true;
  }

  onRewardShop(): void {}

  onDeletePartnerCard(): void {}

  flipCard() {
    this.state = 'flip';
  }

  flipAnimationDone(event: any) {
    if (event.fromState === 'front') {
      this.frontside = false;
      this.state = 'back';
    } else if (event.fromState === 'back') {
      this.frontside = true;
      this.state = 'front';
    }
  }
}
