import { Component, EventEmitter } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';


class Product {
    title: string;
    imageUrl: string;
    price: number;

    constructor(title: string, imageUrl: string, price: number) {
        this.title = title;
        this.imageUrl = imageUrl;
        this.price = price;
    }
}

@Component({
    selector: 'search-bar',
    outputs: ['onSearch'],
    template: `
        <input type="text" (keyup)="textChanged(searchBarText)" #searchBarText><br />
    `
})
class SearchBar {
    onSearch: EventEmitter<String>;

    constructor() {
        this.onSearch = new EventEmitter();
    }

    textChanged(searchBar: HTMLInputElement) {
        this.onSearch.emit(searchBar.value);
    }
}

@Component({
    selector: 'product-row',
    inputs: ['product'],
    host: {'class': 'item'},
    template: `
        <img src="{{ product.imageUrl }}" alt="Product Image" width="50" height="50" />
        {{ product.title }}, ${'$'}{{ product.price }}<br />
    `
})
class ProductRow {
    product: Product;
}

@Component({
    selector: 'product-list',
    directives: [ProductRow, SearchBar],
    template: `
    <search-bar (onSearch)="setSearch($event)"></search-bar>
        <product-row *ngFor="let product of getProducts()" [product]="product" [class.selected]="isSelected(product)" (click)="addToCart(product)"></product-row>
    `
})
class ProductList {
    products: Product[];
    selectedProduct: Product;
    search: string = null;

       constructor() {
           this.products = [
               new Product("Note 3", "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRlqZhnmQZv1k2XontntLl5LeVUgnqz7BGE5_Q77MayjSE0dt-Dbg", 400),
               new Product("GTX 1080", "http://static.trustedreviews.com/94/0000392c1/46d6/gtx-1080-hero-1.jpg", 500),
               new Product("NZXT S340", "https://sta3-nzxtcorporation.netdna-ssl.com/uploads/product_section/image/209/S340_Images_06.png", 70)
           ];
       }

       addToCart(product: Product) {
           alert(`${product.title} has been added to your cart!`);
           this.selectedProduct = product;
       }

       isSelected(product: Product) {
           if (this.selectedProduct == product) {
               return true;
           }

           return false;
       }

       getProducts() {
           var searchedProducts: Product[] = [];

           for (var item of this.products) {
               console.log(this.search);

               if (this.search == null || item.title.toLowerCase().indexOf(this.search.toLowerCase()) != -1) {
                   searchedProducts.push(item);
               }
           }

           return searchedProducts;
       }

       setSearch(search: string) {
           this.search = search;
       }
}

@Component({
    selector: 'inventory-app',
    directives: [ProductList],
    template: `
        <product-list></product-list>
    `
})
class InventoryApp {

}

bootstrap(InventoryApp);