<template>
    <b-button 
        :id=id
        class="appup-link"
        href="#"
        :variant="linkVarient"
        :disabled="disabled"
        v-b-tooltip.hover
        :title="tooltip"
        @click="onLinkClick">
        <template v-if="icon">
            <icon :name="icon"></icon>
        </template>
        {{label}}
    </b-button>
</template>
<script>
    import _ from 'lodash';
    
    const acceptedLinkStyles = ['link'];
    
    /**
     * Appup Link
    */
    export default {
        name: 'appup-link',
        components: { 
             
        },
        props: {
            /**
             * Id of elements.
             */
            id: {
                type: String,
                required: false
            },

            /**
             * Label to be displayed for the link
            */            
             label: {
                type: String,
                default: ''
             },
            /**
             * If the button should be disabled or not
             */
             disabled: {
                 type:Boolean,
                 default: false
             },
             /**
             * Fontawesome icon name to be provided
             */
            icon: {
                type: String,
                default: ''
            },
            /**
             * Tooltip to be displayed when mouseover on link
             */
            tooltip: {
                type: String,
                default: ''
            }
        },
        data: function() {
            return {
                linkVarient:
                    _.indexOf(acceptedLinkStyles, this.linkStyle) != -1 ? this.linkStyle : 'link',                  
            }
        },
        computed: {
            
        },
        methods: {
            onLinkClick: function() {
                this.$emit('click');
            }
        },          
    };
</script>
