<template>
    <v-menu
        v-model="menu.visible"
        :position-x="menu.x"
        :position-y="menu.y"
        absolute
        offset-y
        right
        :close-on-content-click="false"
        :close-on-click="false"
    >

        <v-card
            :width="width"
            :height="height"
        >
            <v-card-title>
                {{ __('Setare access utilizatori la foldere') }}
                <v-spacer></v-spacer>

                <cs-btn 
                    icon="mdi-close"
                    :click="() => OnClickCancel()"
                />
            </v-card-title>

            <v-divider></v-divider>

            <v-card-text class="py-1 px-2">
                <account-autocomplete 
                    :accounts="accounts"
                    v-model="user_id"
                    class="mb-3"
                />

                <v-card 
                    tile 
                    flat 
                    :disabled="! user_id"
                >
                    <folder-acces-control 
                        :caption="null"
                        :folders="folders"
                        :customer_id="null"
                        :type="type"
                        v-model="selectedFolders"
                    />
                </v-card>
            </v-card-text>

            <v-divider></v-divider>

            <v-card-actions>
                <cs-btn 
                    color="bg-dark-blue"
                    caption="Salvează"
                    outlined
                    :click="OnClickSave"
                    :disabled="! user_id"
                />

                <v-spacer></v-spacer>
                
                <cs-btn-cancel 
                    :click="() => OnClickCancel()"
                />
            </v-card-actions>

        </v-card>
    </v-menu>
</template>

<script>

    export default {
        props: {
            app: {required: true},
            menu: {required: true},
            width: {default: 540},
            height: {default: null},
        },

        data: () => ({
            user_id: null,
            selectedFolders: [],
        }),

        watch: {
            user_id: function(newUserId) {
                if(newUserId)
                {
                    let ds = this.app.dataSession.FolderspermissionsByAccount;
                    ds.GetByCustomerAndUser(this.customer_id, this.user_id);
                    let i = setInterval( () => {
                        if(! ds.processing)
                        {
                            clearInterval(i);
                            let r = _.filter(ds.items, item => 1 * item.has_access == 1);
                            this.selectedFolders = _.map(r, item => item.folder_id);
                        }
                    }, 260);
                }
                else
                {
                    this.selectedFolders = [];
                }
            }
        },

        computed: {
            folders() {
                return this.app.dataSession.Folders.items;
            },

            accounts() {
                let r = this.app.dataSession.Accounts.items;
                r = _.filter(r, item => {

                    if(! item.role )
                    {
                        return false;
                    }
                    
                    return item.role.slug == 'customer';
                })
                return r;
            },

            customer_id() {
                return this.app.classes.Customeruploader.customer_id;
            },

            type() {
                return this.app.classes.Customeruploader.type;
            }
        },

        methods: {
            OnClickSave() {
                let data = {
                    user_id: this.user_id,
                    selectedFolders: this.selectedFolders,
                    customer_id: this.customer_id,
                }

                this.app.requests.SaveFoldersAccess
                    .ResetData()
                    .SetData(data)
                    .Post([
                        response => {
                            this.OnClickCancel();
                        }
                    ]);
            },

            OnClickCancel() {
                this.user_id = null;
                this.selectedFolders = [];
                this.menu.visible = false;
            }
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
            CsBtnCancel: require('@CsVueComp/buttons/CsBtnCancel').default
        },

        name: 'FoldersAccessMenu',
    }
</script>