<template>
    <b-button 
        :id=id
        class="appup-button"
        :size="buttonSize" 
        :variant="buttonVarient"
        v-b-tooltip.hover
        :title="tooltip"
        :type="type"
        :disabled="disabled"
        @click="onButtonClick">
        <template v-if="icon">
            <icon :name="icon"></icon>
        </template>
        {{label}}
    </b-button> 
</template>
<script>
    import _ from 'lodash';

    const acceptedStyles = ['primary', 'secondary', 'success', 'warning', 'danger'];
    const acceptedTypes = ['button', 'submit', 'reset'];

    /**
     * Appup Button
     * 
     * `TODOs:` 
     * action - invoke some method, open modal window, navigate to page
     * 
     * navigateTo 
     */
    export default {
        name: 'appup-button',
        props: {
            /**
             * Id of input elements.
             */
            id: {
                type: String,
                required: false,
            },

            /**
             * Size of the button
             * 
             * `small, medium, large`
             */
            size: {
                type: String,
                default: 'medium'
            },

            /**
             * Style varient of the button
             * 
             * `primary, seconday, success, warning, danger`
             */
            buttonStyle: {
                type: String,
                default: 'primary'
            },

            /**
             * Lavel to be displayed for the button
             */
            label: {
                type: String,
                default: ''
            },

            /**
             * Tooltip to be displayed when mouseover on it
             */
            tooltip: {
                type: String,
                default: ''
            },

            /**
             * Fontawesome icon name to be provided
             */
            icon: {
                type: String,
                default: ''
            },

            /**
             * Type of the button
             * 
             * `button, submit, reset`
             */
            type: {
                type: String,
                default: 'button'
            },

            /**
             * If the button should be disabled or not
             */
            disabled: {
                type: Boolean,
                default: false
            },

            /**
             * Page/Url it should be navigated to
             * 
             * `
             * Provide url with http / https
             * 
             * Provide name of the Route to which we should be navigated to
             * `
             */
            navigateTo: {
                type: String,
                default: ''
            },
        },
        data: function() {
            return {
                buttonSize: 
                    this.size == "small" ? "sm"
                    : this.size == "large" ? "lg" : '',
                buttonVarient:
                    _.indexOf(acceptedStyles, this.buttonStyle) != -1 ? this.buttonStyle : 'primary',
                buttonType:
                    _.indexOf(acceptedTypes, this.type) != -1 ? this.type : 'button',
            }
        },
        computed: {
        },
        mounted() {
        },
        methods: {
            onButtonClick: function() {
                if(this.navigateTo){
                this.$router.push(this.navigateTo);
                }else{
                this.$emit('click');

                }
            }
        },
        components: { 
        }
    };
</script>