<template>
    <v-tooltip 
        :bottom="position == 'bottom'"
        :top="position == 'top'"
        :left="position == 'left'"
        :right="position == 'right'"
        :disabled="! tooltip || disabled || loading"
        color="bg-dark-blue"
    >
        <template #activator="{ on, attrs }">

            <v-hover v-slot="{ hover }">
                <v-btn 
                    v-bind="attrs"
                    v-on="on"
                    :icon="isIcon"
                    :small="small"
                    :disabled="disabled"
                    color="#f47920"
                    :depressed="depressed"
                    :outlined="isOutlined"
                    :loading="loading"
                    class="text-no-transform"
  
                    @click="OnClick"
                    @keydown.tab="OnPressTab"
                >
                    <v-icon
                        v-if="!! icon"
                        :class="{
                            'white--text': false && (hover && ! isIcon),
                            'text-orange': true || (! hover || isIcon),
                        }"
                    >
                        {{ icon }}
                    </v-icon>
                    
                    <span 
                        v-if="!! caption"
                        :class="{
                            'white--text': false && ( hover && ! disabled && ! loading),
                            'grey--text': disabled ||  loading,
                            'text-orange': ! (disabled ||  loading),
                        }"
                    >
                        {{ __(caption) }}
                    </span>
                </v-btn>
                
                
            </v-hover>

        </template>

        <span class="text-caption">
            {{ __(tooltip) }}
        </span>
    </v-tooltip>
</template>

<script>
    export default {
        props: {
            tooltip: {default: null},

            icon: {default: false},

            caption: {default: null},

            small: {default: true},

            disabled: {default: false},

            click: {default: null},

            position: {default: 'bottom'},

            depressed: {default: false},

            loading: {default: false},
        },

        computed: {
            isIcon() {
                return !! this.icon && ! this.caption;
            },

            isOutlined() {
                if( this.disabled )
                {
                    return false;
                }
                return (! this.hover && ! this.isIcon) || this.loading
            }
        },

        methods: {
            OnClick(e) {
                if( _.isFunction(this.click) )
                {
                    return this.click({
                        position: {
                            x: e.clientX,
                            y: e.clientY, 
                        }
                    });
                }
                this.$emit('click', e);
            },

            OnPressTab(e) {
                this.$emit('keypresstab', e);
            }
        },

        name: 'CsOrangeBtn',        
    }
</script>