<template>
    <button class="btn btn-label-primary btn-icon" @click="toggleText">
        <i :class="buttonClass"></i>
    </button>
</template>

<script setup>
    import { ref, watch, defineProps } from 'vue';

    const props = defineProps({
        isToggleEnabled: {
            type: Boolean,
            default: false,
        },
        isActive: {
            type: Boolean,
            required: false,
        },
    });

    const buttonClass = ref('bx bx-edit-alt');

    watch(
        () => props.isActive,
        newVal => {
            buttonClass.value = newVal ? 'bx bx-x' : 'bx bx-edit-alt';
        },
    );

    const toggleText = () => {
        if (props.isToggleEnabled) {
            buttonClass.value = buttonClass.value === 'bx bx-edit-alt' ? 'bx bx-x' : 'bx bx-edit-alt';
        }
    };
    const resetButton = () => {
        buttonClass.value = 'bx bx-edit-alt';
    };

    defineExpose({ resetButton });
</script>
