import { Component, OnInit, OnDestroy } from '@angular/core';
import { flipAnimation } from './flip.animation';
import { Observable, Subject } from 'rxjs';
import { SharedSelectors } from '../../../../core/store/selectors/shared.selectors';
import { Select, Store } from '@ngxs/store';
import { EditCustomerData } from '../../../../core/models/edit-customer.model';
import { takeUntil, switchMap } from 'rxjs/operators';
import { UpdateCurrentBreadcrumbName } from '../../../../core/store/actions/breadcrumb.actions';
import { shrinkTitleAnimation, shrinkSecondaryAnimation, shrinkMainCard } from '../customer-loyalty-card/shrink.animation';
import { User } from 'apps/sales/src/app/core/models/user.model';
import { CustomerService } from 'apps/sales/src/app/core/services/customer.service';
import { BonusCardInfoDTO } from '@swagger/crm';

@Component({
  selector: 'app-customer-loyalty-card',
  templateUrl: './customer-loyalty-card.component.html',
  styleUrls: ['./customer-loyalty-card.component.scss'],
  animations: [flipAnimation, shrinkTitleAnimation, shrinkSecondaryAnimation, shrinkMainCard],
})
export class CustomerLoyaltyCardComponent implements OnInit, OnDestroy {
  @Select(SharedSelectors.getCustomerEditData) customerEditData$: Observable<EditCustomerData>;
  constructor(private store: Store, private customerService: CustomerService) {}
  destroy$ = new Subject();
  customer;
  expanded = true;

  personalCards = [];
  partnerCards = [];

  ngOnInit() {
    this.customerEditData$
      .pipe(
        takeUntil(this.destroy$),
        switchMap((data: EditCustomerData) => {
          if (data && data.customer) {
            return this.customerService.getBonusCards(data.customer.id);
          }
        })
      )
      .subscribe((bonusCards: BonusCardInfoDTO[]) => {
        if (bonusCards && bonusCards.length > 0) {
          this.personalCards = this.cardMapping(bonusCards, true);
          this.partnerCards = this.cardMapping(bonusCards, false);
        }
      });
  }

  private cardMapping(cards: BonusCardInfoDTO[], primary: boolean) {
    return cards
      .map((card) => {
        return {
          code: card.code,
          name: `${card.firstName} ${card.lastName}`,
          totalPoints: card.totalPoints,
          isPrimary: card.isPrimary,
          isActive: card.isActive,
          animate: false,
        };
      })
      .filter((card) => card && card.isPrimary === primary && card.isActive);
  }

  flipCard(index: number) {
    this.personalCards[index].animate = !this.personalCards[index].animate;
  }

  deletePartnerCard() {
    // TODO: implement logic when we have the API
  }

  addParnterCard() {
    // TODO: implement logic when we have the API
  }

  premiupShop() {
    // TODO: implement logic when we have the API
  }

  expand() {
    this.expanded = !this.expanded;
    this.store.dispatch(new UpdateCurrentBreadcrumbName(this.expanded ? 'Kundenkarte' : 'Empfehlungen', 'customer'));
  }

  ngOnDestroy(): void {
    this.destroy$.next();
  }
}
