import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';
import { RouterLink } from '@angular/router';
import { ProductCardComponent } from '../../../../../components/product-card/product-card.component';
import { UserExperienceFacade } from '../../../../../facades/platform/user-experience.facade';
import { TranslatePipe } from '../../../../../i18n/translate.pipe';
import { TranslateService } from '../../../../../i18n/translate.service';
import { LangRoutePipe } from '../../../../../pipes/lang-route.pipe';
import { CartService } from '../../../../../services';
import { UserNotificationService } from '../../services/user-notification.service';
import { EmptyStateComponent } from '../../../../../shared/ui/empty-state/empty-state.component';
import { ButtonComponent } from '../../../../../shared/ui/button/button.component';

@Component({
  selector: 'app-wishlist-page',
  standalone: true,
  imports: [RouterLink, ProductCardComponent, TranslatePipe, LangRoutePipe, EmptyStateComponent, ButtonComponent],
  templateUrl: './wishlist-page.component.html',
  styleUrls: ['./wishlist-page.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class WishlistPageComponent {
  private readonly cartService = inject(CartService);
  private readonly uxFacade = inject(UserExperienceFacade);
  private readonly translate = inject(TranslateService);
  private readonly notifications = inject(UserNotificationService);

  readonly favorites = this.uxFacade.wishlist;
  readonly hasItems = computed(() => this.favorites().length > 0);

  addToCart(itemId: number, event: Event): void {
    event.preventDefault();
    event.stopPropagation();
    this.cartService.addItem(itemId);
    this.notifications.show(this.translate.t('ux.addedToCart'), 'success');
  }

  removeFromWishlist(itemId: number): void {
    const target = this.favorites().find(entry => entry.product.itemID === itemId);
    if (!target) {
      return;
    }

    this.uxFacade.toggleWishlist(target.product);
    this.notifications.show(this.translate.t('ux.wishlistRemoved'), 'info');
  }

  clearWishlist(): void {
    this.uxFacade.clearWishlist();
    this.notifications.show(this.translate.t('ux.wishlistCleared'), 'info');
  }
}
