<template>
    <div class="fm-grid">
        <div class="grid grid-cols-2 md:grid-cols-8 md:gap-2 sm:grid-cols-4 sm:gap-1">
            <div v-if="!isRootPath" v-on:click="levelUp" class="fm-grid-item text-center hover:bg-stone-50">
                <div class="fm-item-icon">
                    <i class="fa-solid fa-arrow-turn-up 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-regular pb-2" v-bind:class="acl && directory.acl === 0 ? 'fa-lock' : 'fa-folder'" />
                </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">
                    <i v-if="acl && file.acl === 0" class="fa-solid fa-file-circle-xmark pb-2" />
                    <thumbnail v-else-if="thisImage(file.extension)" v-bind:disk="disk" v-bind:file="file"></thumbnail>
                    <i v-else class="pb-2" v-bind:class="extensionToIcon(file.extension)" />
                </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';
import Thumbnail from './Thumbnail.vue';

export default {
    name: 'GridView',
    components: { Thumbnail },
    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());
        },
    },
};
</script>

<style lang="scss">
.fm-grid {
    padding-top: 1rem;

    .fm-grid-item {
        //position: relative;
        width: 125px;
        padding: 0.4rem;
        margin-bottom: 1rem;
        margin-right: 1rem;
        border-radius: 5px;

        &.active {
            @apply bg-stone-200;
        }

        &:not(.active):hover {
            @apply bg-stone-100;
        }

        .fm-item-icon {
            font-size: 4rem;
            cursor: pointer;
        }

        .fm-item-icon > i,
        .fm-item-icon > figure > i {
            //color: #6c757d;
        }

        .fm-item-info {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}
</style>
