<template>
    <v-tooltip 
        v-if="tooltip"
        :bottom="position == 'bottom'"
        :top="position == 'top'"
        :left="position == 'left'"
        :right="position == 'right'"
        :disabled="disabled"
        color="bg-dark-blue"
    >
        <template #activator="{ on, attrs }">
            <v-btn
                v-bind="attrs"
                v-on="on"
                :icon="isIcon"
                :small="small"
                :x-small="xsmall"
                :disabled="disabled"
                :color="color"
                :depressed="depressed" 
                :outlined="outlined"
                :loading="loading" 
                :text="text"
                class="text-no-transform"
                :class="htmlClass"
                @click="OnClick"
                @keydown.tab="OnPressTab"
            >
                <v-icon v-if="!! icon">
                    {{ icon }}
                </v-icon>
                
                <span v-if="!! caption">
                     {{ translate ? __(caption) : caption }}
                </span>
            </v-btn>
        </template>

        <div class="text-caption text-center" v-html="__(tooltip)">
        </div>
    </v-tooltip>

    <v-btn 
        v-else
       :icon="isIcon"
       :small="small"
       :x-small="xsmall"
       :disabled="disabled"
       :color="color"
       :depressed="depressed"
       :outlined="outlined"
       :loading="loading"
       :text="text"
       class="text-no-transform"
       :class="htmlClass"
       @click="OnClick"
       @keydown.tab="OnPressTab"
    >
        <v-icon
            v-if="!! icon"
        >
            {{ icon }}
        </v-icon>
        
        <span v-if="!! caption">
            {{ translate ? __(caption) : caption }}
        </span>
    </v-btn>
</template>

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

            icon: {default: false},

            caption: {default: null},

            small: {default: true},

            xsmall: {default: false},

            disabled: {default: false},

            click: {default: null},

            position: {default: 'bottom'},

            color: {default: null},

            depressed: {default: false},

            outlined: {default: false},

            loading: {default: false},

            text: {default: false},

            htmlClass: {default: null},

            translate: {default: true},
        },

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

        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: 'CsBtn',        
    }
</script>