<!--
 This file is part of the Meeds project (https://meeds.io/).
 
 Copyright (C) 2020 - 2022 Meeds Association contact@meeds.io
 
 This program is free software; you can redistribute it and/or
 modify it under the terms of the GNU Lesser General Public
 License as published by the Free Software Foundation; either
 version 3 of the License, or (at your option) any later version.
 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 Lesser General Public License for more details.
 
 You should have received a copy of the GNU Lesser General Public License
 along with this program; if not, write to the Free Software Foundation,
 Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-->
<template>
  <v-expansion-panel class="my-0" dense>
    <v-expansion-panel-header
      v-show="hasDeeds"
      class="py-3 px-0"
      hide-actions>
      <template #default="{open}">
        <v-list-item flat class="pa-0">
          <v-list-item-icon class="me-2">
            <v-icon size="16" v-text="open && 'fa-chevron-up' || 'fa-chevron-down'" />
          </v-list-item-icon>
          <v-list-item-content class="flex flex-grow-0 flex-shrink-0 me-2">
            {{ title }}
          </v-list-item-content>
          <v-list-item-content class="flex flex-grow-0 flex-shrink-0 me-2">
            ( {{ availableSize }} )
          </v-list-item-content>
          <v-list-item-content class="mr-7">
            <v-divider />
          </v-list-item-content>
        </v-list-item>
      </template>
    </v-expansion-panel-header>
    <v-expansion-panel-content v-show="hasDeeds" class="mx-n6 mb-n2">
      <deed-provisioning-management-tenants-table
        :loading="loading"
        :status="status"
        :deeds="deeds" />
      <v-row v-if="hasMore" class="ml-6 mr-6 mb-6 mt-n4">
        <v-btn
          :loading="loading"
          class="loadMoreButton ma-auto mt-4 btn"
          block
          @click="loadMore">
          {{ $t('deeds.provisioning.management.loadMore') }}
        </v-btn>
      </v-row>
    </v-expansion-panel-content>
  </v-expansion-panel>
</template>
<script>
export default {
  props: {
    status: {
      type: String,
      default: null,
    },
    deeds: {
      type: Array,
      default: function() {
        return [];
      },
    },
    availableSize: {
      type: Array,
      default: function() {
        return [];
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data: () => ({
    limit: 5,
    pageSize: 5,
  }),
  computed: {
    title() {
      return this.$t(`deeds.provisioning.management.${this.status}`);
    },
    displayedSize() {
      return this.deeds.length || 0;
    },
    hasDeeds() {
      return this.displayedSize > 0;
    },
    hasMore() {
      return this.availableSize > this.displayedSize;
    },
  },
  methods: {
    loadMore() {
      this.limit += this.pageSize;

      this.$root.$emit('status-load-more', this.status, this.limit);
    },
  }
};
</script>
