<script>
import { computed, defineComponent, onMounted, ref, TransitionGroup } from "vue";
import { useInkline } from "@inkline/inkline/composables";
import { uid } from "@grozav/utils";
import { IToast } from "@inkline/inkline/components/IToast";
import { toastEventBus } from "@inkline/inkline/constants";
const componentName = "IToastContainer";
export default defineComponent({
  name: componentName,
  components: {
    IToast,
    TransitionGroup
  },
  inheritAttrs: false,
  props: {
    /**
     * The event bus to use for showing/hiding toasts
     * @type EventBus
     * @default toastEventBus
     * @name eventBus
     */
    eventBus: {
      type: Object,
      default: () => toastEventBus
    },
    /**
     * The default duration for toasts in milliseconds, if not specified in the plugin or toast display options
     * @type number
     * @default undefined
     * @name duration
     */
    duration: {
      type: Number,
      default: void 0
    },
    /**
     * The default dismissible state for toasts, if not specified in the plugin or toast display options
     * @type Boolean
     * @default undefined
     * @name dismissible
     */
    dismissible: {
      type: Boolean,
      default: void 0
    },
    /**
     * The default option for showing the progress bar for toasts, if not specified in the plugin or toast display options
     * @type Boolean
     * @default undefined
     * @name showProgress
     */
    showProgress: {
      type: Boolean,
      default: void 0
    }
  },
  setup(props) {
    const inkline = useInkline();
    const toastPositions = ref({
      "top-left": [],
      top: [],
      "top-right": [],
      right: [],
      "bottom-right": [],
      bottom: [],
      "bottom-left": [],
      left: []
    });
    const toastPositionKeys = ref(Object.keys(toastPositions.value));
    const classes = computed(() => ({}));
    onMounted(() => {
      addEventListeners();
    });
    function addEventListeners() {
      props.eventBus.on("show", showToast);
      props.eventBus.on("hide", hideToast);
      props.eventBus.on("hideAll", hideAllToasts);
    }
    function showToast(toast) {
      const id = toast.id || uid("toast");
      const toastAlreadyVisible = toastPositionKeys.value.find(
        (position2) => toastPositions.value[position2].find((toast2) => toast2.id === id)
      );
      if (toastAlreadyVisible) {
        console.log(`Toast with id "${id}" is already visible.`);
        return;
      }
      const color = toast?.color || inkline.options.toast?.color || "light";
      const size = toast?.size || inkline.options.toast?.size || "md";
      const duration = [toast?.duration, props.duration, inkline.options.toast?.duration].find(
        (duration2) => typeof duration2 !== "undefined"
      ) || 0;
      const dismissible = [toast?.dismissible, props.dismissible].find(
        (dismissible2) => dismissible2 === true
      );
      const showProgress = [toast?.showProgress, props.showProgress].find(
        (showProgress2) => showProgress2 === true
      );
      const position = toast?.position || inkline.options.toast?.position || "top-right";
      toastPositions.value[position].push({
        ...toast,
        id,
        color,
        size,
        duration,
        position,
        dismissible,
        showProgress
      });
    }
    function hideToast({ id }) {
      toastPositionKeys.value.forEach((position) => {
        if (!toastPositions.value[position].find((toast) => toast.id === id)) {
          return;
        }
        toastPositions.value[position] = toastPositions.value[position].filter(
          (toast) => toast.id !== id
        );
      });
    }
    function hideAllToasts() {
      toastPositions.value = {
        "top-left": [],
        top: [],
        "top-right": [],
        right: [],
        "bottom-right": [],
        bottom: [],
        "bottom-left": [],
        left: []
      };
    }
    return {
      toastPositions,
      toastPositionKeys,
      classes,
      hideToast
    };
  }
});
</script>

<template>
    <div v-bind="$attrs" class="toast-container" :class="classes">
        <div
            v-for="position in toastPositionKeys"
            :key="position"
            :class="`toast-position -${position}`"
        >
            <TransitionGroup name="toast-transition">
                <IToast
                    v-for="toast in toastPositions[position]"
                    :key="toast.id"
                    v-bind="toast"
                    @update:modelValue="hideToast(toast)"
                />
            </TransitionGroup>
        </div>
    </div>
</template>
