<template>
    <div class="fm-breadcrumb">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb"
                v-bind:class="[manager === activeManager ? 'active-manager' : 'bg-light']">
                <li class="breadcrumb-item"
                    v-on:click="selectMainDirectory">
                    <span class="badge badge-secondary">
                        <i class="far fa-hdd"></i>
                    </span>
                </li>
                <li class="breadcrumb-item text-truncate"
                    v-for="(item, index) in breadcrumb"
                    v-bind:key="index"
                    v-bind:class="[breadcrumb.length === index + 1 ? 'active' : '']"
                    v-on:click="selectDirectory(index)">
                    <span>{{ item }}</span>
                </li>
            </ol>
        </nav>
    </div>
</template>

<script>
export default {
    name: 'Breadcrumb',
    props: {
        manager: { type: String, required: true },
    },
    computed: {
        /**
         * Active manager name
         * @returns {default.computed.activeManager|(function())|string|activeManager}
         */
        activeManager() {
            return this.$store.state.fm.activeManager;
        },

        /**
         * Selected Disk for this manager
         * @returns {default.computed.selectedDisk|(function())|default.selectedDisk|null}
         */
        selectedDisk() {
            return this.$store.state.fm[this.manager].selectedDisk;
        },

        /**
         * Selected directory for this manager
         * @returns {default.computed.selectedDirectory|(function())|default.selectedDirectory|null}
         */
        selectedDirectory() {
            return this.$store.state.fm[this.manager].selectedDirectory;
        },

        /**
         * Breadcrumb
         * @returns {*}
         */
        breadcrumb() {
            return this.$store.getters[`fm/${this.manager}/breadcrumb`];
        },
    },
    methods: {
        /**
         * Load selected directory
         * @param index
         */
        selectDirectory(index) {
            const path = this.breadcrumb.slice(0, index + 1).join('/');

            // only if this path not selected
            if (path !== this.selectedDirectory) {
                // load directory
                this.$store.dispatch(`fm/${this.manager}/selectDirectory`, { path, history: true });
            }
        },

        /**
         * Select main directory
         */
        selectMainDirectory() {
            if (this.selectedDirectory) {
                this.$store.dispatch(`fm/${this.manager}/selectDirectory`, { path: null, history: true });
            }
        },
    },
};
</script>