<template>
    <v-sheet class="text-dark-blue clickable mb-1">
        <v-sheet
            class="d-flex align-center"
            :outlined="isActive"
            :class="{
                'orange lighten-4 rounded': isActive
            }"
            @dblclick.stop="OnDblClick"
            @click.stop="OnClickFolder"
            @contextmenu="OnRightClick"
        >
            <v-badge
                :content="folder.files.length"
                :value="folder.files.length"
                :color="color"
                overlap
                left
            >
                <v-icon :color="color" small>
                    {{ icon }}
                </v-icon>
            </v-badge>

            <v-sheet
                width="calc(100% - 24px)"
                class="pl-4 pr-1 text-truncate text-caption"
                color="transparent"
            >
                <span
                    :class="{
                        'font-weight-bold': !! isDefaultFolder,
                    }"
                >
                    {{ __(folder.name.trim()) }}
                </span>
            </v-sheet>
        </v-sheet>
        
        <v-sheet 
            v-if="isOpen && mychildren.length" 
            class="pl-6"
        >
            <folders-tree
                :app="app"
                :uploader="uploader"
                :folders="mychildren"
                :parentFolder="folder"
            />
            
        </v-sheet>
    </v-sheet>
</template>

<script>
    /**
     * Asta-i componenta recursiva
     */
    export default {
        props: {
            app: {required: true},
            uploader: {required: true},
            folder: {required: true},

            openFolderIcon: {default: 'mdi-folder-open-outline'},
            folderIcon: {default: 'mdi-folder-outline'},
            color: {default: '#0d1c45'},
        },

        computed: {
            mychildren() {
                let r = _.filter(this.folder.children, folder => {

                    // let folderVisible = this.app.dataSession.Customerfolderspermissions.FolderIsVisible(folder.id, this.app.user.id);

                    // return  folderVisible && ! folder.deleted;
                    return true;
                });

                return _.orderBy(r, [folder => folder.order_no], ['asc']);
            },

            isDefaultFolder() {
                return !! this.folder.default_folder_id;
            },

            openFolders() {
                return this.uploader.openFoldersManager.openFolders;
            },

            selectedFolder() {
                return this.uploader.activeFolderManager.selectedFolder;
            },

            isActive() {
                return !! this.selectedFolder && (this.selectedFolder.id == this.folder.id);
            },

            isOpen() {
                return !! _.find(this.openFolders, item => item == this.folder.id);
            },

            icon() {
                return this.isOpen ? this.openFolderIcon : this.folderIcon;
            },

            customer() {
                return this.uploader.customer;
            },
        },

        methods: {

            OnDblClick() {
                this.uploader.activeFolderManager.SetActiveFolder(this.folder);
                this.uploader.openFoldersManager.CloseFolder(this.folder);
            },

            OnClickFolder() {
                this.uploader.activeFolderManager.SetActiveFolder(this.folder);
                this.uploader.openFoldersManager.OpenFolder(this.folder);                
            },

            OnRightClick(e) {
                this.app.menus.Folderrightmenu.ShowRightMenu(e, this.folder);
            }
        },
        
        name: 'FolderTreeItem',
    }
</script>