<template>
    <button
        :type="htmlType"
        :disabled="disabled"
        :class="buttonClasses"

        class="transition-all select-none duration-200"
    >
        <div class="flex items-center justify-center gap-2">
            <i v-if="icon" :class="iconClasses"></i>
            <span v-if="resolvedLabel" class="whitespace-nowrap">{{ resolvedLabel }}</span>
            <slot v-if="$slots.default" class="whitespace-nowrap"></slot>
        </div>
    </button>
</template>

<script>
export default {
    name: 'BaseButton',

    props: {
        label: {
            type: String,
            default: '',
        },
        icon: {
            type: String,
            default: '',
        },
        type: {
            type: String,
            default: 'primary',
            validator: value => ['primary', 'secondary', 'danger', 'gradient', 'warning'].includes(value),
        },
        size: {
            type: String,
            default: 'medium',
            validator: value => ['small', 'medium', 'large'].includes(value),
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        color: {
            type: String,
            default: 'brand',
        },
        htmlType: {
            type: String,
            default: 'button',
            validator: value => ['button', 'submit', 'reset'].includes(value),
        },
        background: {
            type: Boolean,
            default: true,
        },
    },
    computed: {
        resolvedLabel() {
            const label = this.label;
            if (!label) return label;

            const match = /^\s*\{\{(.+?)\}\}\s*$/.exec(label);
            if (!match) return label;

            try {
                const value = new Function('$root', 'return (' + match[1] + ');')(this.$root);
                return value != null ? value : '';
            } catch (e) {
                console.warn('BaseButton: failed to evaluate label expression:', label, e);
                return label;
            }
        },
        buttonClasses() {
            const baseClasses = 'rounded-md font-semibold transition-all select-none duration-200';

            const gradientTypeClasses = {
                primary: `border-t-2 shadow-xl border-b-2 border-t-${this.color}-300 border-b-${this.color}-700 shadow-${this.color}-950/50 bg-gradient-to-b from-${this.color}-400 to-${this.color}-500 text-${this.color}-950 active:bg-gradient-to-t active:border-t-${this.color}-600 active:border-b-${this.color}-300`,
                secondary: 'border-t-2 border-b-2 border-t-theme-900 border-b-theme-940 shadow-theme-950/50 bg-gradient-to-b from-theme-920 to-theme-940 text-theme-300 active:bg-gradient-to-t active:border-t-theme-950 active:border-b-theme-900',
                danger: 'border-t-2 border-b-2 border-t-rose-300 border-b-rose-700 shadow-rose-950/50 bg-gradient-to-b from-rose-400 to-rose-500 text-rose-950 active:bg-gradient-to-t active:border-t-rose-600 active:border-b-rose-300',
                gradient: 'border-t-2 border-b-2 border-t-theme-900 border-b-theme-950 shadow-theme-950/50 bg-gradient-to-b from-theme-900/50 to-theme-900/25 text-theme-300',
                warning: 'border-t-2 border-b-2 border-t-amber-300 border-b-amber-700 shadow-amber-950/50 bg-gradient-to-b from-amber-400 to-amber-500 text-amber-950 active:bg-gradient-to-t active:border-t-amber-600 active:border-b-amber-300'
            };

            const flatTypeClasses = {
                primary: `bg-${this.color}-400 text-${this.color}-950 active:bg-${this.color}-500`,
                secondary: ' bg-theme-900 text-theme-300 active:bg-theme-800',
                danger: ' bg-rose-500 text-white active:bg-rose-600',
                gradient: ' bg-theme-900/50 text-theme-300',
                warning: ' bg-amber-500 text-white active:bg-amber-600'
            };
            
            const typeClasses = this.$root.newTheme ? flatTypeClasses : gradientTypeClasses;

            const sizeClasses = {
                small: 'py-1 px-3 text-sm',
                medium: 'py-1 px-4 text-base',
                large: 'py-2 px-6 text-lg'
            };

            const disabledClasses = 'opacity-50 cursor-not-allowed';

            const classes = [
                baseClasses,
                sizeClasses[this.size] || sizeClasses.medium
            ];

            if (this.background) {
                classes.push(typeClasses[this.type] || typeClasses.gradient);
            }

            if (this.disabled) {
                classes.push(disabledClasses);
            }
            
            return classes.join(' ');
        },
        iconClasses() {
            return ['ph', this.icon];
        },
    },
    methods: {

    },
};
</script>