ekart/src/app/features/product/show-product/show-product.ts

import { Component, inject, Input, signal, WritableSignal } from "@angular/core";
import { ProductModel } from "../../../core/models/product.model";
import { ProductService } from "../services/product-service";
import { LucideAngularModule, Heart, ArrowRight, ArrowLeft } from "lucide-angular";
import { FavoriteButton } from "../../../shared/components/favorite-button/favorite-button";
import { CartService } from "@app/core/services/cart-service";

@Component({
  selector: "app-show-product",
  imports: [LucideAngularModule, FavoriteButton],
  templateUrl: "./show-product.html",
  styleUrl: "./show-product.css",
})
export class ShowProduct {
  @Input() slug?: string;

  HeartIcon = Heart;
  ArrowRightIcon = ArrowRight;
  ArrowLeftIcon = ArrowLeft;
  productService = inject(ProductService);
  cartService = inject(CartService);
  product = signal<ProductModel | null>(null);
  activeImageIndex: WritableSignal<number> = signal(0);
  totalImageCount: number = 0;

  ngOnInit() {
    if (!this.slug) return;
    this.productService.getProduct(this.slug).subscribe((data) => {
      this.product.set(data.data);
      this.totalImageCount = this.product()?.productImages?.length || 0;
    });
  }

  addToCart() {
    this.cartService.addToCart({ productId: this.product()!.id, quantity: 1 }).subscribe();
  }

  nextImage() {
    this.activeImageIndex.update((index) => (index + 1) % this.totalImageCount);
  }

  prevImage() {
    this.activeImageIndex.update(
      (index) =>
        (index - 1 + this.product()?.productImages.length!) % this.product()?.productImages.length!,
    );
  }
}