<template>
  <div v-if="!loading" class="documents-body">
    <div class="ma-4 d-flex documents-no-body flex-column justify-center text-center text-color">
      <v-img
        :src="emptyDocs"
        class="mx-auto mb-4 overflow-visible"
        overflow="visible"
        :max-height="!isMobile ? 55 : 46"
        :max-width="!isMobile ? 61 : 51"
        contain
        eager>
        <v-icon :size="!isMobile ? 28 : 23" class="closeIcon text-light-color white float-right">fas fa-times-circle</v-icon>
      </v-img>
      <div>
        <p class="text-light-color">
          <span>{{ noContentFolderLabel }}</span>
        </p>
        <div v-if="displayNoContentFolderActions">
          <span class="ps-1">{{ addFolderLabel }}</span>
          <v-icon
            size="13"
            class="pe-1 text-sub-title"
            @click="addFolder()">
            fas fa-folder
          </v-icon>
          <span class="ps-1">{{ addDocumentLabel }}</span>
          <v-icon
            size="13"
            class="pe-1 text-sub-title"
            @click="openDrawer()">
            fas fa-file-alt
          </v-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isMobile: {
      type: Boolean,
      default: false
    },
    query: {
      type: String,
      default: null,
    }
  },
  data: () => ({
    emptyDocs: '/documents-portlet/images/docs.png',
    currentFolder: null,
    loading: true
  }),
  computed: {
    noContentFolderLabel() {
      return this.$t && this.$t('documents.label.no-content.folder');
    },
    addFolderLabel() {
      return this.$t && this.$t('documents.label.no-content.addFolder');
    },
    addDocumentLabel() {
      return this.$t && this.$t('documents.label.no-content.addDocument');
    },
    displayNoContentFolderActions() {
      return this.currentFolder?.accessList?.canEdit === true;
    }
  },
  created() {
    this.$root.$on('set-current-folder', (folder) => this.currentFolder = folder);
    this.$root.$on('loading-documents', (value) => {
      this.loading = value;
    });
  },
  methods: {
    addFolder() {
      this.$root.$emit('documents-add-folder');
    },
    openDrawer() {
      this.$root.$emit('documents-open-attachments-drawer');
    },
  }
};
</script>