<template>
  <div
    class="clickable ma-auto my-10px mx-2"
    @click="changeVisibility()">
    <v-icon
      size="16"
      class="pe-1">
      fas fa-eye
    </v-icon>
    <span class="ps-1 text-body menu-text-color">{{ $t('documents.label.visibility') }}</span>
  </div>
</template>
<script>
export default {
  props: {
    file: {
      type: Object,
      default: null,
    },
    isMobile: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    viewTab: 'RECENT',
    spaceId: eXo.env.portal.spaceId,
  }),
  methods: {
    changeVisibility(){
      this.$root.$emit('open-visibility-drawer', this.file);
      this.getDocumentView();
      document.dispatchEvent(new CustomEvent('manage-access', {
        detail: {
          'category': this.file.folder ? 'Folder' : 'Document',
          'spaceId': this.spaceId,
          'view': this.viewTab
        }
      }));
      if (this.isMobile) {
        this.$root.$emit('close-file-action-menu');
      }
    },
    getDocumentView() {
      const currentUrlSearchParams = window.location.search;
      const queryParams = new URLSearchParams(currentUrlSearchParams);
      if (queryParams.has('view')) {
        const view = queryParams.get('view');
        this.viewTab = view.toLowerCase() === 'folder' ? 'Folder' : 'RECENT';
      }
    }
  }
};
</script>