import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Title } from '@angular/platform-browser';

import { Product, Category } from '../../models/product.model';
import { ProductsService } from '../../services/products.service';

@Component({
    selector: 'products',
    templateUrl: 'products.component.html'
})

export class ProductsComponent implements OnInit {
    categories: Category[];
    products: Product[];

    tableMessages: Object = {
        totalMessage: 'items'
    };

    defaultSort: Object[] = [
        { prop: 'id', dir: 'description' }
    ];

    constructor(
        private title: Title,
        private router: Router,
        private productsService: ProductsService
    ) {}

    ngOnInit(): void {
        this.title.setTitle('Products');

        this.productsService.getProductCategories()
            .subscribe(categories => this.categories = categories);

        this.productsService.getProducts()
            .subscribe(products => this.products = products);
    }

    getCategoryName(id: number): string | null {
        let category = this.categories.find(category => category.id === id);

        return category ? category.name : null;
    }

    onActivate(event: any): void {
        this.router.navigate(['/product', event.row.id]);
    }
}