marketplaces/src/app/components/items-carousel/items-carousel.component.ts

import { Component, OnInit, signal, ChangeDetectionStrategy } from '@angular/core';
import { DecimalPipe } from '@angular/common';
import { RouterLink } from '@angular/router';
import { CarouselModule } from 'primeng/carousel';
import { ButtonModule } from 'primeng/button';
import { TagModule } from 'primeng/tag';
import { ApiService, CartService } from '../../services';
import { Item } from '../../models';
import { environment } from '../../../environments/environment';
import { getDiscountedPrice, getMainImage } from '../../utils/item.utils';
import { LangRoutePipe } from '../../pipes/lang-route.pipe';

@Component({
    selector: 'app-items-carousel',
    templateUrl: './items-carousel.component.html',
      imports: [DecimalPipe, RouterLink, CarouselModule, ButtonModule, TagModule, LangRoutePipe],
    styleUrls: ['./items-carousel.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ItemsCarouselComponent implements OnInit {
    products = signal<Item[]>([]);
    loading = signal(true);
    isnovo = environment.theme === 'novo';

    responsiveOptions: { breakpoint: string; numVisible: number; numScroll: number }[] | undefined;

    constructor(
        private apiService: ApiService,
        private cartService: CartService
    ) {}

    ngOnInit() {
        this.apiService.getRandomItems(10).subscribe({
            next: (items) => {
                this.products.set(items);
                this.loading.set(false);
            },
            error: () => {
                this.loading.set(false);
            }
        });

        this.responsiveOptions = [
            {
                breakpoint: '1400px',
                numVisible: 5,
                numScroll: 1
            },
            {
                breakpoint: '1199px',
                numVisible: 4,
                numScroll: 1
            },
            {
                breakpoint: '991px',
                numVisible: 3,
                numScroll: 1
            },
            {
                breakpoint: '767px',
                numVisible: 2,
                numScroll: 1
            },
            {
                breakpoint: '575px',
                numVisible: 1,
                numScroll: 1
            }
        ];
    }

    getSeverity(remainings: string): 'success' | 'info' | 'warn' | 'danger' | 'secondary' | 'contrast' {
        switch (remainings) {
            case 'high':
                return 'success';
            case 'low':
                return 'warn';
            case 'out':
                return 'danger';
            default:
                return 'success';
        }
    }

    getInventoryStatus(remainings: string): string {
        switch (remainings) {
            case 'high':
                return 'INSTOCK';
            case 'low':
                return 'LOWSTOCK';
            case 'out':
                return 'OUTOFSTOCK';
            default:
                return 'INSTOCK';
        }
    }

    readonly getItemImage = getMainImage;
    readonly getDiscountedPrice = getDiscountedPrice;

    addToCart(event: Event, item: Item): void {
        event.preventDefault();
        event.stopPropagation();
        this.cartService.addItem(item.itemID, 1);
    }
}