import { Component, computed, inject, Input, signal } from "@angular/core";
import { CartItemModel, CartItemRequest, CartModel } from "@app/core/models/cart.model";
import { CartItem } from "../cart-item/cart-item";
import { AuthService, AuthState } from "@core/services/auth-service";
import { CartService } from "@app/core/services/cart-service";
import { finalize, tap } from "rxjs";
import { RouterLink } from "@angular/router";

@Component({
  selector: "app-cart",
  imports: [CartItem, RouterLink],
  templateUrl: "./cart.html",
  styleUrl: "./cart.css",
})
export class Cart {
  @Input() cart!: CartModel;

  isLoading = signal(false);

  protected readonly authService = inject(AuthService);
  protected readonly cartService = inject(CartService);
  protected readonly AuthState = AuthState;

  updateProductQty(cartItem: CartItemRequest) {
    this.isLoading.set(true);

    this.cartService
      .updateCart(cartItem)
      .pipe(finalize(() => this.isLoading.set(false)))
      .subscribe();
  }

  removeProduct(productId: number) {
    this.isLoading.set(true);

    this.cartService
      .removeFromCart(productId)
      .pipe(finalize(() => this.isLoading.set(false)))
      .subscribe();
  }
}