<template>
  <div :class="[ui.wrapper, ui.position, ui.width]">
    <div v-if="notifications.length" :class="ui.container">
      <div v-for="notification of notifications" :key="notification.id">
        <UNotification
          v-bind="notification"
          :class="notification.click && 'cursor-pointer'"
          @click="notification.click && notification.click(notification)"
          @close="toast.remove(notification.id)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent } from "vue";
import { defu } from "defu";
import { useToast } from "../../composables/useToast";
import UNotification from "./Notification.vue";
import { useState, useAppConfig } from "#imports";
import appConfig from "#build/app.config";
export default defineComponent({
  components: {
    UNotification
  },
  props: {
    ui: {
      type: Object,
      default: () => appConfig.ui.notifications
    }
  },
  setup(props) {
    const appConfig2 = useAppConfig();
    const ui = computed(() => defu({}, props.ui, appConfig2.ui.notifications));
    const toast = useToast();
    const notifications = useState("notifications", () => []);
    return {
      // eslint-disable-next-line vue/no-dupe-keys
      ui,
      toast,
      notifications
    };
  }
});
</script>
