<template>
  <div>
    <!-- Filter control -->
    <b-field grouped class="p-2 mt-3 mb-0" v-if="showFilter">
      <b-field>
        <b-dropdown >
          <template #trigger="{ active }">
              <b-button :icon-right="active ? 'arrow-up-drop-circle' : 'arrow-down-drop-circle'" />
          </template>

          <b-dropdown-item @click="refresh"> <b-icon icon="refresh" size="is-small" /> {{ $t('button.refresh') }} </b-dropdown-item>
          <b-dropdown-item @click="listDeleted"> {{ $t('button.list_deleted') }} </b-dropdown-item>

          <slot name="dropdown"/>
        </b-dropdown>
      </b-field>

      <b-input :placeholder="$t('text.filter')" expanded icon="magnify" @input.native="onInputFilter"/>

      <b-field v-if="showAddButton">
        <b-button type="is-primary" inverted icon-left="plus-circle" @click="add"> {{ $t('button.new') }} </b-button>
      </b-field>
    </b-field>

    <div class="px-2">
      <slot name="advancedFilter"></slot>
    </div>

    <!-- List -->
    <leanisp-empty v-if="list.length === 0"/>
    <div class="mt-5">
        <div class="box is-shadowless p-2 m-2 is-clickable"
            v-for="(item, index) in list"
            :key="index"
            @click="select(item.id)">
            <b-tag class="is-pulled-right" type="is-danger" v-if="item.deleted">{{ $t('text.deleted') }}</b-tag>

            <slot name="item" v-bind:item="item">
              <span class="has-text-weight-medium has-text-dark">{{ item.description }}</span>
              <br />
              <small>{{ item.modifiedDate | moment("calendar")}}</small>
            </slot>

            <!-- Tag List -->
            <b-taglist>
              <leanisp-tag v-for="(tag, index) in item.tags" 
                          :tag="tag"
                          :key="index"/>
            </b-taglist>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name:"LeanispList",
  props: ["list", "hideFilter", "hideAddButton"],
  methods: {
    add() {
        this.$emit('add')
    },
    listDeleted() {
        this.$emit('list-deleted')
    },
    select(id) {
        this.$emit('select', id)
    },
    refresh() {
        this.$emit('refresh')
    },
    onInputFilter (event) {
      this.$emit('input', event.target.value);
    }
  },
  computed: {
      showFilter () {
          return !this.hideFilter
      },
      showAddButton () {
          return !this.hideAddButton
      }
  }
}
</script>