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';
import { inject as service } from '@ember/service';

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

  constructor() {
    super(...arguments);
    this.assignExistingItems();
  }

  async assignExistingItems() {
    let items = await this.store.peekAll('meal');
    this.items = items;
  }

  @(task(function * () {
    return yield this.store.queryRecord('meal', 'random');
  })) fetchRecipe;

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

  @action
  async addRecipe() {
    await this.fetchRecipe.perform();
  }
}