import { Params } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit, Inject, Input} from '@angular/core';
import {Router} from '@angular/router';
import {DbAbstractionLayer} from "@nodeart/dal";
import {Subject} from 'rxjs/Subject';
import {ProductService} from "@nodeart/productservice";
@Component({
  selector: 'app-products-list',
  templateUrl: './products-list.component.html',
  styleUrls: ['./products-list.component.scss']
})
export class ProductsListComponent implements OnInit {

  products: any = [];
  searchValue: string;
  searchValueStream = new Subject<string>();
  startProductId : string ;
  currentPageStream = new Subject<number>();
  currentPage = 1;
  totalPages = 0;
  itemsOnPage = 10;
  attrs = [];
  tags = [];
  @Input() categoryId = "";

  constructor(private dal: DbAbstractionLayer,
              private router: Router, 
              private productService: ProductService,
              private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.getProducts();
    this.searchValueStream.subscribe(productName => {
        this.getProducts();
      });
    this.route.params.forEach((params: Params) => {
      if(params['id']){
        this.categoryId = params['id'];
      }
      
      });
    this.getTotalPages();
    this.currentPageStream.subscribe(newPage => {
      this.getProducts();
    });
  }

  inc(){
    this.currentPageStream.next(++this.currentPage);
  }

  dec(){
    this.currentPageStream.next(--this.currentPage);
  }

  onSelect(id){
    this.router.navigate(['product', id]);
  }

  getProducts(){
    console.log(this.attrs);
    console.log(this.tags);
    this.productService
      .searchProducts(this.attrs, this.tags, this.itemsOnPage, (this.currentPage - 1) * this.itemsOnPage)
      .on('value', data =>{
      if(data.val()){
        this.products = data.val().map(item => {
          item['_source']['id'] = item['_id'];
          return item['_source'];
        });
        console.log(this.products);
      }
    });
  }

  search(productName: string){
    this.searchValueStream.next(productName);
  }

  filter(){
    this.currentPage = 1;
    this.getTotalPages();
    this.productService.filterProducts(this.attrs, this.tags, this.itemsOnPage, (this.currentPage - 1) * this.itemsOnPage)
      .on('value', data => {
        if (data.val()){
          if (data.val()['total'] == 0) { 
            this.products = [];
          }else if (data.val()['hits']){
            this.products = data.val()['hits'].map(item => {
              item['_source']['id'] = item['_id'];
              return item['_source'];
            });
          }
          console.log(this.products);
        }
    })
  }

  getTotalPages(){
    this.productService.getTotalPages(this.attrs, this.tags).on('value', data => {
      if(data.val()){
        let items = data.val();
        this.totalPages = Math.ceil(items / this.itemsOnPage);
      }
    });
  }

  updateAttrs(newAttrs){
    this.attrs = newAttrs;
  }

  updateTags(newTags){
    this.tags = newTags;
  }
}
