<template>
  <div>

    <app-expand-transition name="fade">
      <task-item-edit :task-item="newItem" v-if="showAddItem"></task-item-edit>
    </app-expand-transition>

    <table class="table is-narrow">
      <thead>
      <tr>
        <th></th>
        <th>Name</th>
        <th>Quantity</th>
        <th>
          <button class="button" @click="toggleShowAddItem">{{ showAddItem ? 'Done' : 'New Item' }}</button>
        </th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="i in taskItems">
        <td></td>
        <td>{{ i.name }}</td>
        <td>{{ i.quantity }}</td>
        <td></td>
      </tr>
      <tr v-if="taskItems.length === 0">
        <td colspan="4">
          No Items
        </td>
      </tr>
      </tbody>
    </table>

  </div>
</template>

<script>

  import TaskItemEdit from "./TaskItemEdit";

  const newItemTemplate = function() {
    return {
      name: '',
      quantity: ''
    };
  };

  export default {
    props: {
      taskItems: {
        required: true,
        type: Array
      }
    },

    data() {
      return {
        showAddItem: false,
        newItem: newItemTemplate(),
        newItemValidationErrors: {}
      };
    },

    methods: {

      toggleShowAddItem() {
        this.showAddItem = !this.showAddItem;
        if (this.showAddItem) {
          this.$nextTick(() => {
            //this.$refs.quantityInput.focus();
          });
        }
      }

    },

    components: {
      TaskItemEdit
    }
  }

</script>

<style lang="scss" scoped>

  .columns {
    margin-top: 0;
    margin-bottom: 0;
  }

  .column {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

</style>