<template>
    <button
        type="button"
        :aria-disabled="isDisabled"
        class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
        :class="[
            isPrimary ? 'btn-primary' : 'btn-secondary',
            isFloat ? 'float-end' : '',
            isLoaderDisplayed ? 'has-loader' : '',
        ]"
        @click="clicked">
        <span class="m-0">{{ this.buttonText }}</span>
        <loader
            class="ms-2"
            v-if="isLoaderDisplayed && !suppressLoader"
            v-bind:class="[this.loaderColor, this.loaderPosition]" />
    </button>
</template>

<script>
import loader from "@/ux-components/loader/loader";

export default {
    name: "modalButtonMain",
    props: {
        isPrimary: Boolean,
        buttonText: String,
        isDisabled: Boolean,
        loaderColor: String,
        loaderPosition: String,
        isFloat: Boolean,
        suppressLoader: Boolean,
    },
    data() {
        return {
            isLoaderDisplayed: false,
        };
    },
    methods: {
        removeLoader() {
            this.isLoaderDisplayed = false;
        },
        clicked() {
            this.pushEventToGA(
                this.$route.query[this.queryStrings.FMG_PAGE],
                this.GaActions.CLICKED,
                this.buttonText,
                true
            );
            if (!this.isDisabled) {
                this.isLoaderDisplayed = true;
                this.$emit("click-event");
            }
        },
        resetButtonStyle() {
            this.isLoaderDisplayed = false;
        },
    },
    components: {
        loader,
    },
};
</script>

<style lang="scss">
.btn {
    &.btn-primary {
        position: relative;
        background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
        border: none;
        border-radius: $border-radius-lg;
        color: $white;
        justify-content: center;
        font-weight: 500;
        @media (hover: hover) {
            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
        }
        &:focus {
            box-shadow:
                0 0 0 3px,
                0 0 0 5.5px $blue-700;
        }
        &:focus, // Mouse, touch, stylus focus
    &:focus-visible {
            // Keyboard focus for accessibility
            outline: none;
            box-shadow:
                0 0 0 3px,
                0 0 0 5.5px $blue-700;
            color: $white;
            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
        }
        &:disabled {
            background: $gray-200 !important;
            background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important;
            color: $gray-600 !important;
            font-weight: 400;
            height: 48px;
            border: none;
            border-radius: $border-radius-lg;
            cursor: pointer;
            pointer-events: all;
        }
        &.has-loader {
            color: $white;
            background: $blue-700;
            box-shadow:
                0 0 0 3px,
                0 0 0 5.5px $blue-700;
            pointer-events: none;
        }
        &.delay {
            // fixes flicker while transitioning between states
            transition: background 0s 0s ease-in-out;
        }
    }
    &.btn-secondary {
        position: relative;
        background: transparent;
        border: 1px solid $blue;
        border-radius: $border-radius-lg;
        color: $blue;
        font-weight: 500;
        transition: all 150ms linear;
        height: 3rem;
        &:hover {
            color: $white;
            @include blue-gradient;
        }
        &:focus, // Mouse, touch, stylus focus
        &:focus-visible {
            // Keyboard focus for accessibility
            outline: none;
            box-shadow:
                0 0 0 3px $white,
                0 0 0 5.5px $blue-700;
            color: $white;
            @include blue-gradient;
        }
        &:disabled {
            background: transparent;
            color: $gray-550 !important;
            font-weight: 400;
            height: 48px;
            border: 1px solid $gray-550;
            border-radius: $border-radius-lg;
            cursor: pointer;
            pointer-events: all;
        }
        &.has-loader {
            color: $white;
            @include blue-gradient;
            pointer-events: none;
        }
        &.delay {
            // fixes flicker while transitioning between states
            transition: background 0s 0s ease-in-out;
        }
    }
}
</style>
