<template>
    <v-card tile flat :height="cardHeight" :width="width" outlined color="blue lighten-1">

        <v-card-title class="px-1 pt-1 pb-0">
            <span class="text-caption white--text">
                {{  __('Vizibilitate :name. :user', {name: foldertype.title, user: user.full_name}) }}
            </span>
        </v-card-title>

        <v-card-title class="px-1 pt-0 pb-1" v-if="customer.id">
            <v-sheet width="100%" class="transparent text-truncate text-caption white--text">
                {{ customer.name }} <span v-if="$env == 'local'">#{{ customer.id }}</span>
            </v-sheet>
        </v-card-title>

        <v-sheet :height="cardHeight ? cardHeight - 50 : null" class="overflow-y-auto overflow-x-hidden text-caption">
            <v-treeview
                dense
                selectable
                open-all
                :disabled="false"
                :items="folders"
                ref="FoldersTree"
                v-model="selected"
            >
                <template #label="{item}">
                    <div class="text-caption d-flex align-center justify-space-between mb-1">
                        <v-sheet>
                            {{item.name}} {{ item.id }}
                        </v-sheet>
                    </div>
                </template>
            </v-treeview>

        </v-sheet>

    </v-card>
</template>

<script>
    import FolderDataProvider from 'APPS/Dataproviders/Customer/Folders/Folders';
    import FolderspermissionsDataProvider from 'APPS/Dataproviders/Customer/Folderspermissions/Folderspermissions';
    import SaveFoldersAccess from './Requests/SaveFoldersAccess.request';

    export default {

        props: {
            foldertype: {required: true},

            user: {required: true},
            role: {required: true},
            customer: {required: true},
            account: {required: true},

            width: {default: 400},
            height: {default: 600},
        },

        data: () => ({
            t: null,
            v: null,
            foldersdp: null,
            folderspermissionsdp: null,
            selected: [],
            changecount: 0,
        }),

        computed: {
           
            unique() {
                if( ! this.customer.id )
                {
                    return null;
                }

                return this.customer.id + '#' + this.user.id + '#' + this.role.id + '#' + this.foldertype.key;
            },

            cardHeight() {
                if( ! this.customer.id )
                {
                    return null;
                }
                return this.height ? this.height :  this.width * 1.618033;
            },

            folders() {
                if( this.foldersdp.length == 0)
                {
                    return [];
                }
                return [{
                    id: -1,
                    name: this.foldertype.title,
                    children: this.foldersdp.items
                }];
            },
        },

        watch: {
            unique: function(unique, oldunique) {
                if(this.customer.id)
                {
                    this.LoadFolders();
                }
            },

            selected: function(selected) {
                // console.log('WATCH-->', selected);
                this.SaveVisibility();
            }
        },

        methods: {

            SaveVisibility() {

                this.changecount++;

                if(this.changecount > 1)
                {
                    if(this.v)
                    {
                        clearTimeout(this.v);
                    }

                    this.v = setTimeout( () => {

                        let data = {
                            user_id: this.user.id,
                            selectedFolders: this.selected,
                            customer_id: this.customer.id,
                        }

                        new SaveFoldersAccess()
                            .ResetData()
                            .SetData(data)
                            .Post([
                                response => {
                                }
                            ]);

                    }, 300);
                }
            },


            LoadVisibility() {
                this.folderspermissionsdp.GetByCustomerAndUserAndType(this.customer.id, this.user.id, this.foldertype.type);

                let i = setInterval( () => {

                    if(! this.folderspermissionsdp.processing )
                    {
                        clearInterval(i);

                        let r = _.map(_.filter(this.folderspermissionsdp.items, item => 1 * item.has_access == 1), item => item.folder_id);

                        this.selected = r;

                        if(!! this.$refs.FoldersTree)
                        {
                            this.$refs.FoldersTree.updateAll(true);
                        }
                    }
                }, 350);

            },

            LoadFolders() {
                if(this.customer.id)
                {
                    if(this.t)
                    {
                        clearTimeout(this.t);
                    }

                    this.t = setTimeout( () => {
                        this.foldersdp.GetByCustomerIdAndType(this.customer.id, this.foldertype.type);
                        let i = setInterval( () => {

                            if(! this.foldersdp.processing )
                            {
                                clearInterval(i);
                                this.LoadVisibility();
                            }
                        }, 350);

                    }, 300);
                }
            }
        },

        created() {
            this.foldersdp = new FolderDataProvider({vue: this});   
            this.folderspermissionsdp = new FolderspermissionsDataProvider({vue: this});
            
            this.LoadFolders();
        },

        name: 'DecCustomerAccountFoldersVisibility',
    }
</script>