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


@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: Observable<Pizza[]>;



  constructor(listPizzaWithToppings: ListPizzaWithToppingGQL) {
    this.pizzas = listPizzaWithToppings
      .watch()
      .valueChanges
      .pipe(map(result => result.data.listPizza as Pizza[]));
  }

  ngOnInit(): void {
  }

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

}
