<template>
    <v-sheet class="mb-1 text-dark-blue clickable">

        <v-sheet
            class="d-flex align-center"
            :outlined="isActive"
            :class="{
                'orange lighten-4 rounded': isActive
            }"
            @click.stop="OnClickPermission"
            @dblclick.stop="OnDblClick"
            @contextmenu="$emit('right-click', {
                e: $event, 
                permission
            })"
        >
            <v-badge
                :content="permission.children.length"
                :value="permission.children.length"
                :color="color"
                overlap
            >
                <v-icon :color="color">
                    {{ icon }}
                </v-icon>
            </v-badge>

            <v-sheet
                width="calc(100% - 24px)"
                class="pl-4 pr-1 text-truncate text-caption"
                color="transparent"
                :title="title"
            >
                <span>
                    {{ permission.name }}
                </span>
            </v-sheet>
        </v-sheet>
        
        <v-sheet 
            v-if="!! permission.children.length && isOpen" 
            class="mt-1 pl-6"
        >
            <permissions
                :app="app"
                :permissions="permission.children"
                :parentPermission="permission"
            />
            
        </v-sheet>

    </v-sheet>
</template>

<script>
    /**
     * Asta-i componenta recursiva
     */
    export default {
        props: {
            app: {required: true},
            permission: {required: true},          
            color: {default: '#0d1c45'},
            openFolderIcon: {default: 'mdi-folder-open-outline'},
            folderIcon: {default: 'mdi-folder-outline'},
        },

        computed: {
            title() {
                return this.permission.slug;
            },

            activePermission() {
                return this.app.classes.Controller.activePermission;
            },

            isActive() {
                return !! this.activePermission && (this.activePermission.id == this.permission.id);
            },

            openPermissions() {
                return this.app.classes.Controller.openPermissions;
            },

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

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

        },

        methods: {
            OnDblClick() {
                this.app.classes.Controller.ClosePermission(this.permission);
            },

            OnClickPermission() {
                this.app.classes.Controller.OpenPermission(this.permission);                
            }
        },
        
        name: 'PermissionItem',
    }
</script>