<template>
  <div class="container">
    <div v-if="active_category == -1" class="columns">
      <div v-for="c in categories" :key="c.id" class="column">
        <button @click="setActiveCategory(c.id)"
          class="button is-large is-primary has-text-dark button-block">
        {{ c.name }}</button>
      </div>
    </div>
    <div v-else class="box">
      <button @click="setActiveCategory(-1)" class="button is-pulled-left">Categories</button>
      <h2 class="subtitle">{{ categories[active_category].name }}</h2>
      <ul>
        <li v-for="item in displayed" :key="item.id" class="has-text-left">
          <a href=""
             @click.prevent="$emit(
               'open-details',
               items.findIndex((i) => i.id ==item.id))">
          {{ item.title }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export const categories = [
  {id: 0, name: "Petit-déjeuner"},
  {id: 1, name: "Entrée"},
  {id: 2, name: "Plat principal"},
  {id: 3, name: "Dessert"}
];

export default {
  name: 'RecipeList',
  props: ["items"],
  data () {
    return {
      active_category: -1,
      categories,
    }
  },
  methods: {
    setActiveCategory: function(id) {
      this.active_category = id;
    },
  },
  computed: {
    displayed: function() {
        return this.items.filter(
          rec => rec.category == this.active_category
        );
    }
  },
}
</script>

<style scoped>
  .button-block {
    width: 200px;
    height: 200px;
  }

  .li {
    list-style: circle;
  }
</style>
