<script setup>
import { ref, watch } from "vue";
import { isEmpty } from "lodash-es";
import { useAlert } from "../composables/alert";
const isAlertOpen = ref(false);
const timeout = ref(3e3);
const alert = useAlert();
const currentItem = ref();
const renewAlert = () => {
  if (alert?.hasAlert()) {
    currentItem.value = alert?.takeAlert();
    isAlertOpen.value = true;
  } else {
    currentItem.value = void 0;
    isAlertOpen.value = false;
  }
};
watch(() => alert?.hasAlert(), (hasAlert) => {
  if (hasAlert) {
    renewAlert();
  }
});
</script>

<template>
  <VSnackbar
    v-if="currentItem"
    v-model="isAlertOpen"
    :timeout="timeout"
    location="center"
    multi-line
    variant="text"
    @update:model-value="renewAlert()"
  >
    <!-- @vue-expected-error Type conversion problem -->
    <VAlert
      v-model="isAlertOpen"
      closable
      :type="currentItem.alertType"
      elevation="2"
      theme="dark"
      variant="flat"
      v-bind="currentItem.alertIcon ? { icon: currentItem.alertIcon } : {}"
      @click:close="renewAlert()"
    >
      {{ currentItem.statusCode ? currentItem.statusCode + " " : "" }} {{ currentItem.message }} {{ !isEmpty(currentItem.data) ? currentItem.data : "" }}
    </VAlert>
  </VSnackbar>
</template>
