<template>
    <button
        :aria-disabled="isDisabled"
        class="btn d-flex align-items-center justify-content-center delay"
        :class="[getVariant, `btn-${size}`, canOverride ? 'btn-override' : '']"
        @click="clicked">
        <span class="m-0">{{ buttonText }}</span>
    </button>
</template>

<script>
import { buttonVariants } from '@/constants/component-variants';
import buttonSizes from '@/constants/button-sizes';

export default {
    name: 'button-main',
    props: {
        variant: { type: String, default: 'primary', validator: (val) => Object.keys(buttonVariants).includes(val) },
        size: { type: String, default: 'md', validator: (val) => Object.keys(buttonSizes).includes(val) },
        buttonText: String,
        isDisabled: Boolean,
        isOutline: Boolean,
        pushToGA: Boolean,
        canOverride: { type: Boolean, required: false, default: true }
    },
    emits: ['click-event'],
    computed: {
        getVariant() {
            if (this.isOutline) {
                return `btn-outline-${this.variant}`;
            }

            return `btn-${this.variant}`;
        }
    },
    methods: {
        clicked() {
            if (!this.isDisabled) {
                if (this.pushToGA) {
                    this.pushEventToGA(
                        this.$route.query[this.queryStrings.ISS_PAGE],
                        this.GaActions.CLICKED,
                        this.buttonText,
                        true
                    );
                }

                this.$emit('click-event');
            }
        }
    }
};
</script>

<style lang="scss" scoped>

</style>
