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

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

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

const buttonClass = ref("bx bx-edit");

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

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

const resetButton = () => {
    buttonClass.value = "bx bx-edit";
};

defineExpose({ resetButton });
</script>
