<template>
  <exo-drawer
    ref="attachmentsListDrawer"
    class="attachmentsListDrawer"
    right>
    <template slot="title">
      <div class="drawerHeader d-flex align-center justify-space-between">
        <div class="drawerTitle">
          <v-btn
            icon
            color="grey"
            @click="closeAttachmentsListDrawer()">
            <v-icon>mdi-keyboard-backspace</v-icon>
          </v-btn>
          <span>{{ $t('attachments.list') }}</span>
        </div>
      </div>
    </template>
    <template slot="titleIcons">
      <v-btn
        v-if="displayOpenAttachmentDrawerButton"
        icon
        color="primary"
        @click="openAttachmentsAppDrawer()">
        <v-icon size="20">
          fa-plus
        </v-icon>
      </v-btn>
    </template>
    <template slot="content">
      <div v-if="attachments.length" class="uploadedFilesItems ml-5">
        <transition-group
          name="list-complete"
          tag="div"
          class="d-flex flex-column">
          <span
            v-for="attachment in attachments"
            :key="attachment"
            class="list-complete-item">
            <attachment-item
              :open-in-editor="openAttachmentsInEditor"
              :is-file-editable="isFileEditable(attachment)"
              :is-file-fillable="isFileFillable(attachment)"
              :is-file-readable="isFileReadable(attachment)"
              :allow-to-edit="false"
              :attachment="attachment"
              :attachments="attachments"
              :allow-to-detach="allowToDetach"
              :can-access="attachment.acl && attachment.acl.canAccess"
              allow-to-preview />
          </span>
        </transition-group>
      </div>
      <div v-else class="no-files-attached d-flex flex-column align-center text-sub-title">
        <div class="d-flex pl-6 not-files-icon">
          <i class="uiIconAttach uiIcon64x64"></i>
          <i class="uiIconCloseCircled uiIcon32x32"></i>
        </div>
        <span>{{ $t('no.attachments') }}</span>
      </div>
    </template>
    <template slot="header"></template>
  </exo-drawer>
</template>

<script>
export default {
  props: {
    attachments: {
      type: Array,
      default: () => []
    },
    supportedDocuments: {
      type: Array,
      default: () => []
    },
    openAttachmentsInEditor: {
      type: Boolean,
      default: () => true
    },
    canFillAttachments: {
      type: Boolean,
      default: () => true
    },
    allowToDetach: {
      type: Boolean,
      default: true
    },
    displayOpenAttachmentDrawerButton: {
      type: Boolean,
      default: true
    }
  },
  created() {
    this.$root.$on('open-attachments-list-drawer', () => this.openAttachmentsListDrawer());
  },
  methods: {
    isFileEditable(attachment) {
      const type = attachment && attachment.mimetype || '';
      return this.supportedDocuments && this.supportedDocuments.filter(doc => doc.edit && doc.mimeType === type
                                                                              && !attachment.cloudDriveFile).length > 0;
    },
    isFileFillable(attachment) {
      const type = attachment && attachment.mimetype || '';
      return this.canFillAttachments && type === 'application/pdf';
    },
    isFileReadable(attachment) {
      const type = attachment && attachment.mimetype || '';
      return this.$supportedDocuments && this.$supportedDocuments.filter(doc => doc.mimeType === type && !attachment.cloudDriveFile).length > 0;
    },
    startLoading() {
      this.$refs.attachmentsListDrawer.startLoading();
    },
    endLoading() {
      this.$refs.attachmentsListDrawer.endLoading();
    },
    openAttachmentsListDrawer() {
      console.log('openFile called');
      this.$refs.attachmentsListDrawer.open();
    },
    closeAttachmentsListDrawer() {
      this.$refs.attachmentsListDrawer.close();
    },
    openAttachmentsAppDrawer() {
      this.closeAttachmentsListDrawer();
      this.$root.$emit('open-attachments-app-drawer');
    }
  }
};
</script>
