import Component from '@glimmer/component';
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
import { A } from '@ember/array';
import { task } from 'ember-concurrency';

export default class RecipeListComponent extends Component {
  @tracked items = A([]);

  @(task(function * () {
    let response = yield fetch('https://www.themealdb.com/api/json/v1/1/random.php');
    response = yield response.json(); 
    return response.meals[0];
  })) fetchRecipe;

  @action
  reorderItems(reorderedItems) {
    this.items = reorderedItems;
  }

  @action
  async addRecipe() {
    let recipe = await this.fetchRecipe.perform();
    this.items.pushObject(recipe);
  }
}