<template>
    <v-card-title class="pa-0">
        <image-icon 
            :src="app.url + 'imgs/icons/' + icon +  '.png'"
        />

        <v-sheet class="d-flex align-center">
            <customer-logo 
                :app="app"
                :customer="customer"
                :form="null"
            />
            
            <v-sheet 
                :width="nameWidth" 
                class="ml-2 text-truncate"
            >
                {{uploader.page_caption ? __(uploader.page_caption, {name: customer.name}) : ''}} 
            </v-sheet>
        </v-sheet>
       
        <v-spacer></v-spacer>

        <template v-if="uploader.hasFolderTree">
            <v-sheet width="200">
                <v-text-field
                    dense
                    hide-details
                    clearable
                    :placeholder="__('Căutare generală...')"
                    append-icon="mdi-magnify"
                    class="text-body-2"
                    :disabled="false"
                    v-model="dataprovider.searchText"
                >
                </v-text-field>
            </v-sheet>

            <popup-menu 
                
                :item="panelswitcher"
                :closeOnContent="true"
            />
        </template>
    </v-card-title> 
</template>

<script>
    export default {
        props: {
            uploader: {required: true},
        },

        data: () => ({
            timeout: null,
        }),

        computed: {
            app() {
                return this.uploader.app;
            },

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

            dataprovider() {
                return this.app.dataSession.Files;
            },

            nameWidth() {
                switch(this.$breakpoint) {
                    case 'xs':
                    case 'sm':
                        return 256;
                    case 'md':
                        return 380;
                }

                return null;
            },

            panelswitcher() {
                return this.app.menus.Panelswitcher;
            },

            icon() {
                if(this.uploader.type == 'documente')
                {
                    return 'document';
                }

                if(this.uploader.type == 'analizagap')
                {
                    return 'document';
                }

                if(this.uploader.type == 'studiicaz')
                {
                    return 'studii-de-caz';
                }

                if(this.uploader.type == 'sfaturidpo')
                {
                    return 'sfaturile-dpo';
                }

                if(this.uploader.type == 'infografice')
                {
                    return 'infografice';
                }
            }
        },

        watch: {
            'dataprovider.searchText': function(searchText) {
                if(this.timeout)
                {
                    clearTimeout(this.timeout);
                }

                this.timeout = setTimeout(() => {
                    this.uploader.selectedFilesManager.UnselectAll();
                    this.uploader.activeFolderManager.innerSearchText = null;
                    if(searchText)
                    {
                        this.uploader.panel = 'files-panel';
                    }
                    else
                    {
                        this.uploader.panel = 'folders-panel';
                    }

                }, 250);
            }
        },


        components: {
            CustomerLogo: require('VUECOMP/VIEWS/Attributes/Customers/CustomerLogo').default,
            ImageIcon: require('@CsVueComp/helpers/images/ImageIcon').default,
            PopupMenu: require('@CsVueComp/menus/popupmenu/PopupMenu').default,
        },

        name: 'UploaderPageTitle',
    }
</script>