<template>
  <div
    class="fixed inset-0 z-10 bg-black bg-opacity-75"
    :class="{
      block: hasModals,
      hidden: !hasModals,
    }"
  >
    <StackModalForm
      v-for="(modal, i) in modals"
      :key="modal.id"
      :config="modal.config"
      :show="modal.show"
      :isActive="i == modals.length - 1"
      @close="removeModal(modal.id)"
      @success="removeModal(modal.id)"
    />
  </div>
</template>

<script>
import { ref, watch } from "@vue/composition-api";
import StackModalForm from "./Form/StackModalForm.vue";
import { injectNotifications } from "../../../common/composables";

export default {
  name: "Modals",
  components: {
    StackModalForm,
  },
  setup(props, { root }) {
    const notifications = injectNotifications();
    const modals = ref([]);
    const hasModals = ref(false);

    const addModal = (modal = null) => {
      if (!modal) return;

      modals.value.push({
        id: modal.id,
        show: true,
        config: modal,
      });
      hasModals.value = true;
    };

    const removeModal = (id) => {
      const hideModal = (modal) =>
        modal.id !== id ? modal : { ...modal, show: false };

      modals.value = modals.value.map(hideModal);
      setTimeout(() => {
        modals.value = modals.value.filter((x) => x.id !== id);

        if (modals.value.length === 0) {
          hasModals.value = false;
        }
      }, 250);
    };

    watch(() => root.$page.octa_modal, addModal);

    watch(
      () => root.$page.octa_response_item,
      (item) => {
        if (!item) return;
        notifications.emit(item.id, item.item);
      },
    );

    return {
      modals,
      removeModal,
      addModal,
      hasModals,
    };
  },
};
</script>