<template>
    <div :class="wrapperClass">
        <button :class="buttonClass"
                :style="buttonStyle"
                @click="buttonClicked"
                :type="submit ? 'submit' : 'button'">
            <span class="buttonComponent__icon-before" v-if="withPrependIcon && !isLoading">
                <slot name="prepend-icon">
                </slot>
            </span>
            <span class="buttonComponent__loading" v-if="isLoading">
                <LoadingIcon/>
            </span>
            <span class="buttonComponent__title">
                <slot></slot>
            </span>
            <span class="buttonComponent__counter" v-if="counter">
                {{ counter }}
            </span>
        </button>
    </div>
</template>

<script lang="ts">
    import RgbaColorConverter from "../../utils/colors/RgbaColorConverter";
    import LoadingIcon from "../icons/LoadingIcon.vue";
    import Vue from "vue";

    // @ts-ignore
    import themeVariables from '../../assets/scss/colors.scss';
    import {
        BUTTON_CLASS,
        BUTTON_CLASS_TRANSPARENT,
        BUTTON_CLASS_OUTLINE,
        BUTTON_CLASS_PREPEND_ICON,
        BUTTON_CLASS_COUNTER,
        BUTTON_CLASS_SMALL,
        BUTTON_CLASS_FAB,
        BUTTON_MIN_WIDTH_CLASS,
        BUTTON_CLASS_WRAPPER,
        BUTTON_CLASS_DISABLED,
        BUTTON_BLOCK_CLASS,
        BUTTON_MARGIN_BOTTOM_CLASS,
        BUTTON_LOADING_CLASS, BUTTON_LARGE_CLASS,
    } from "./constants";

    export default Vue.extend({
        props: {
            background: {
                type: String,
                default(): string {
                    return themeVariables.primary;
                },
            },
            outline: {
                type: Boolean,
                default: false,
            },
            transparent: {
                type: Boolean,
                default: false,
            },
            color: {
                type: String,
                default(): string {
                    return themeVariables.white;
                },
            },
            small: {
                type: Boolean,
                default: false,
            },
            disabled: {
                type: Boolean,
                default: false,
            },
            fab: {
                type: Boolean,
                default: false,
            },
            submit: {
                type: Boolean,
                default: false,
            },
            block: {
                type: Boolean,
                default: false,
            },
            marginBottom: {
                type: Boolean,
                default: false,
            },
            minWidth: {
                type: Boolean,
                default: false,
            },
            isLoading: {
                type: Boolean,
                default: false,
            },
            counter: {
                type: String,
                default: '',
            },
            large: {
                type: Boolean,
                default: false,
            },
        },
        components: {
            LoadingIcon,
        },
        data() {
            return {
                rgbaColorConverter: new RgbaColorConverter(),
            };
        },
        computed: {
            buttonStyle(): object {
                return {
                    '--text-color': this.textColor,
                    '--background-color': this.backgroundColor,
                    backgroundColor: this.backgroundColor,
                    color: this.textColor,
                };
            },
            buttonClass(): object {
                return {
                    [BUTTON_CLASS]: true,
                    [BUTTON_CLASS_TRANSPARENT]: this.transparent,
                    [BUTTON_CLASS_OUTLINE]: this.outline,
                    [BUTTON_CLASS_PREPEND_ICON]: this.withPrependIcon,
                    [BUTTON_CLASS_COUNTER]: !!this.counter,
                    [BUTTON_CLASS_SMALL]: this.small,
                    [BUTTON_CLASS_FAB]: this.fab,
                    [BUTTON_MIN_WIDTH_CLASS]: this.minWidth,
                    [BUTTON_LARGE_CLASS]: this.large,
                };
            },
            wrapperClass(): object {
                return {
                    [BUTTON_CLASS_WRAPPER]: true,
                    [BUTTON_CLASS_DISABLED]: this.disabled,
                    [BUTTON_BLOCK_CLASS]: this.block,
                    [BUTTON_MARGIN_BOTTOM_CLASS]: this.marginBottom,
                    [BUTTON_LOADING_CLASS]: this.isLoading,
                };
            },
            backgroundColor(): string {
                if (this.outline) {
                    return themeVariables.white;
                }
                if (this.transparent) {
                    return 'transparent';
                } else {
                    return this.background;
                }
            },
            textColor(): string {
                if (this.notFilledButton) {
                    return themeVariables.gray1000;
                } else {
                    return this.color;
                }
            },
            withPrependIcon(): boolean {
                return !!this.$slots['prepend-icon'];
            },
            notFilledButton(): boolean {
                return this.outline || this.transparent;
            },
        },
        methods: {
            buttonClicked(): void {
                this.$emit('click');
            },
        },
    });
</script>

<style scoped lang="scss">
    @import "buttonComponent";
</style>
