<template>
    <v-menu 
        v-model="visible"
        :close-on-content-click="false"
        offset-y 
        transition="slide-x-transition" 
        bottom 
        :disabled="orderedCustomers.length <= 1"
        left 
        tile 
    >
        <template #activator="{ on: onMenu }">
            <v-tooltip 
                bottom 
                :disabled="visible"
                color="bg-dark-blue"
            >
                <template #activator="{ on: onTooltip }">

                    <v-hover v-slot="{ hover }">
                        <v-btn 
                            v-if="ACTIVECUSTOMER"
                            text 
                            v-on="{...onMenu, ...onTooltip}"
                            class="text-no-transform mr-2"
                            height="36"
                            :class="{
                                'bg-orange': hover || (orderedCustomers.length <= 1),
                                'white--text': hover || (orderedCustomers.length <= 1),
                            }"
                        >
                            <v-img 
                                v-if="ACTIVECUSTOMER.logo"
                                :src="ACTIVECUSTOMER.logo.url"
                                height="32"
                                contain
                                :width="activeLogoWidth"
                            />
                            
                            &nbsp; {{ ACTIVECUSTOMER.name }} 
                        </v-btn>

                        <v-btn 
                            v-else
                            text 
                            v-on="{...onMenu, ...onTooltip}"
                            class="text-no-transform mr-2"
                            :class="{
                                'bg-orange': hover,
                                'white--text': hover,
                            }"
                        >
                            {{ __('Selectează un client') }}
                        </v-btn>
                    </v-hover>
                    
                    
                </template>

                <span class="text-caption">
                    {{ __('Clientul curent') }}
                </span>

            </v-tooltip>
        </template>

        <v-card v-if="orderedCustomers.length > 1">
            <v-list>
                <v-list-item
                    v-for="(customer, index) in orderedCustomers"
                    :key="'customer-' + index"
                    :disabled="ACTIVECUSTOMER && (customer.id == ACTIVECUSTOMER.id)"
                    @click="OnClick(customer)"
                >
                    <v-sheet 
                        v-if="maxLogoWidth > 0"
                        :width="maxLogoWidth"
                    >
                        <v-img    
                            :src="customer.logo ? customer.logo.url : $url + 'imgs/layout/no-customer-logo.png'"
                            height="32"
                            contain
                            :width="logoWidth(customer)"
                            position="left center"
                        />
                    </v-sheet>

                    <span class="px-1">
                        {{customer.name}}
                    </span>

                    <v-icon 
                        small
                        class="text-dark-blue" 
                        v-if="ACTIVECUSTOMER && (customer.id == ACTIVECUSTOMER.id)"
                    >
                        mdi-check-bold
                    </v-icon>
                </v-list-item>
            </v-list>
        </v-card>
    </v-menu>
</template>

<script>

    const FindByID = require('@CsFunc/global/FindByID');
    const Redirect = require('@CsFunc/global/Redirect');

    export default {
        props: {
            app: {required: true},
        },

        data: () => ({
            visible: false,
        }),

        computed: {

            activeLogoWidth() {
                if(! this.ACTIVECUSTOMER )
                {
                    return 32;
                }
                if( ! this.ACTIVECUSTOMER.logo )
                {
                    return 32;
                }
                if(_.has(this.ACTIVECUSTOMER.logo, 'width'))
                {
                    return 32 * this.ACTIVECUSTOMER.logo.width/this.ACTIVECUSTOMER.logo.height
                }
                if(_.has(this.ACTIVECUSTOMER.logo, 'file_width'))
                {
                    return 32 * this.ACTIVECUSTOMER.logo.file_width/this.ACTIVECUSTOMER.logo.file_height;
                }
            },

            orderedCustomers() {
                return _.orderBy(this.app.user.customers, [item => item.name], ['asc']);
            },

            
            maxLogoWidth() {
                let maxWidth = 32;
                _.each(this.app.user.customers, customer => {
                    if(customer.logo)
                    {
                        let w = 0;
                        
                        if(_.has(customer.logo, 'width'))
                        {
                            w = 32 * customer.logo.width/customer.logo.height;
                        }
                        
                        if(_.has(customer.logo, 'file_width'))
                        {
                            w = 32 * customer.logo.file_width/customer.logo.file_width;
                        }
                        
                        if(w > maxWidth)
                        {
                            maxWidth = w;
                        }
                    }
                })
                return maxWidth
            }
        },

        methods: {
            OnClick(customer) {
                this.visible = false;

                this.app.requests.Saveactivecustomer
                    .ResetData()
                    .SetData({
                        user_id: this.app.user.id,
                        platform: this.app.platform,
                        customer_id: customer.id
                    })
                    .Request([
                        response => Redirect(),
                    ])
            },

            logoWidth(customer) {
                if(! customer.logo )
                {
                    return this.maxLogoWidth;
                }
                
                if(_.has(customer.logo, 'width'))
                {
                    return  32 * customer.logo.width/customer.logo.height;
                }
                
                if(_.has(customer.logo, 'file_width'))
                {
                    return  32 * customer.logo.file_width/customer.logo.file_width;
                }
            },

        },
        

        created() {
            let customer = null;

            let code = this.app.platform + '-active-customer';

            if(_.has(this.app.user.my_settings, code))
            {
                if(this.app.user.my_settings[code])
                {
                    customer = FindByID(this.app.user.customers, this.app.user.my_settings[code]); 
                    if(customer)
                    {
                        this.$store.commit('Customer/setActiveCustomer', customer);
                        this.app.GetUserRole(customer.id);
                    }
                }
            }

            if( ! customer && !! this.app.user.customers.length)
            {
                customer = this.orderedCustomers[0];
                this.$store.commit('Customer/setActiveCustomer', customer);
                this.app.GetUserRole(customer.id);
            }

            // this.app.customer = customer;
            
        },

        name: 'CustomerSelectorPopup',
    }
</script>