import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { map } from 'rxjs/operators';
import { ListPizzaWithToppingGQL, Pizza, PizzaWithToppingChangedGQL, Topping } from 'src/generated/graphql';


@Component({
  selector: 'app-pizza-list-with-topping',
  templateUrl: './pizza-list-with-topping.component.html',
  styleUrls: ['./pizza-list-with-topping.component.scss']
})
export class PizzaListWithToppingComponent implements OnInit {


  displayedColumns: string[] = [
    'id',
    'name',
    'toppings'
  ];

  pizzas = new Subject<Pizza[]>();

  constructor(listPizzaWithToppings: ListPizzaWithToppingGQL, pizzaChanged: PizzaWithToppingChangedGQL) {
    listPizzaWithToppings
      .watch()
      .valueChanges
      .pipe(map(result => result.data.listPizza as Pizza[]))
      .subscribe((pizzas => this.pizzas.next(pizzas)));
    pizzaChanged.subscribe().pipe(map(event => event.data.pizzasChanged as Pizza[]))
      .subscribe((pizzas => this.pizzas.next(pizzas)));

  }

  ngOnInit(): void {
  }

  getToppingListString(toppings: Topping[]): string {
    return toppings.map(topping => topping.name).join(', ');
  }

}
