<template>
  <div class="documents-body">
    <div v-if="!$root.driveView" 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>
    <v-card
      v-else
      min-height="250"
      class="d-flex align-center justify-center"
      flat>
      <div>
        <p>
          <v-icon color="tertiary" size="60">fa-layer-group</v-icon>
        </p>
        <p class="text-title">
          {{ $t('documents.label.noResults') }}
        </p>
      </div>
    </v-card>
  </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>