<template>
    <div class="fm-grid">
        <div class="d-flex align-content-start flex-wrap">
            <div v-if="!isRootPath" v-on:click="levelUp" class="fm-grid-item text-center" >
                <div class="fm-item-icon">
                    <i class="fas fa-level-up-alt fa-5x pb-2"></i>
                </div>
                <div class="fm-item-info"><strong>..</strong></div>
            </div>

            <div class="fm-grid-item text-center unselectable"
                 v-for="(directory, index) in directories"
                 v-bind:key="`d-${index}`"
                 v-bind:title="directory.basename"
                 v-bind:class="{'active': checkSelect('directories', directory.path)}"
                 v-on:click="selectItem('directories', directory.path, $event)"
                 v-on:dblclick.stop="selectDirectory(directory.path)"
                 v-on:contextmenu.prevent="contextMenu(directory, $event)">
                <div class="fm-item-icon">
                    <i class="fa-5x pb-2"
                       v-bind:class="(acl && directory.acl === 0) ? 'fas fa-unlock-alt' : 'far fa-folder'"></i>
                </div>
                <div class="fm-item-info">{{ directory.basename }}</div>
            </div>

            <div class="fm-grid-item text-center unselectable"
                 v-for="(file, index) in files"
                 v-bind:key="`f-${index}`"
                 v-bind:title="file.basename"
                 v-bind:class="{'active': checkSelect('files', file.path)}"
                 v-on:click="selectItem('files', file.path, $event)"
                 v-on:dblclick="selectAction(file.path, file.extension)"
                 v-on:contextmenu.prevent="contextMenu(file, $event)">
                <div class="fm-item-icon">
                    <template v-if="acl && file.acl === 0">
                        <i class="fas fa-unlock-alt fa-5x pb-2"></i>
                    </template>
                    <template v-else-if="thisImage(file.extension)">
                        <img class="img-thumbnail"
                             v-bind:alt="file.filename"
                             v-bind:src="createImgUrl(file.path, file.timestamp)">
                    </template>
                    <template v-else>
                        <i class="far fa-5x pb-2"
                           v-bind:class="extensionToIcon(file.extension)"></i>
                    </template>
                </div>
                <div class="fm-item-info">
                    {{ `${file.filename}.${file.extension}` }}
                    <br>
                    {{ bytesToHuman(file.size) }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import translate from './../../mixins/translate';
import helper from './../../mixins/helper';
import managerHelper from './mixins/manager';

export default {
  name: 'grid-view',
  mixins: [translate, helper, managerHelper],
  data() {
    return {
      disk: '',
    };
  },
  props: {
    manager: { type: String, required: true },
  },
  mounted() {
    this.disk = this.selectedDisk;
  },
  beforeUpdate() {
    // if disk changed
    if (this.disk !== this.selectedDisk) {
      this.disk = this.selectedDisk;
    }
  },
  computed: {
    /**
     * Image extensions list
     * @returns {*}
     */
    imageExtensions() {
      return this.$store.state.fm.settings.imageExtensions;
    },
  },
  methods: {
    /**
     * Check file extension (image or no)
     * @param extension
     * @returns {boolean}
     */
    thisImage(extension) {
      // extension not found
      if (!extension) return false;

      return this.imageExtensions.includes(extension.toLowerCase());
    },

    /**
     * Create url for image
     * @param path
     * @param timestamp
     * @returns {string}
     */
    createImgUrl(path, timestamp) {
      return `${this.$store.getters['fm/settings/baseUrl']}thumbnails?disk=${this.disk}&path=${path}&v=${timestamp}`;
    },
  },
};
</script>