import { PriceMaskDirective } from '@/shared/directives';
import { Component, computed } from '@angular/core';
import { ButtonDirective } from 'primeng/button';
import { Skeleton } from 'primeng/skeleton';
import images from 'src/assets/images';
import { IPosProductSummary } from '../../models/types';
import { POSStore } from '../../store';

@Component({
  selector: 'pos-products-list-view',
  templateUrl: './list-view.component.html',
  imports: [PriceMaskDirective, ButtonDirective, Skeleton],
})
export class PosProductsListViewComponent {
  constructor(private store: POSStore) {}

  products = computed(() => this.store.activatedCategoryProducts());
  loading = computed(() => this.store.getStockLoading());

  productPlaceholder = images.placeholders.default;

  addProduct(product: IPosProductSummary) {
    this.store.addToInOrderProducts(product.id);
  }
}
