<template>
  <div
    id="modal_container"
    v-if="modalStore.isModalOpen"
    class="fixed w-screen h-screen bg-gray-800 flex justify-center items-center"
  >
    <div class="flex">
      <ModalAccountEditCreate
        v-if="whichModal === MODAL_ACCT_EDIT || whichModal === MODAL_CREATE_NEW"
      />
      <ModalAccountInfo v-if="whichModal === MODAL_ACCT_INFO" />
      <ModalDeleteAlert v-if="whichModal === MODAL_DELETE" />
    </div>
  </div>
</template>

<script setup>
// The Lucia project.
// Copyright 2024-2026 DSP, inc.  All rights reserved.
// Authors:
//   cindy.chang@dsp.im (Cindy Chang), 2024/5/30
//   imacat.yang@dsp.im (imacat), 2023/9/23
/**
 * @module views/AccountManagement/ModalContainer Container
 *   that renders the appropriate account management modal
 *   based on the current modal type.
 */

import { computed } from "vue";
import { useModalStore } from "@/stores/modal";
import ModalAccountEditCreate from "./ModalAccountEditCreate.vue";
import ModalAccountInfo from "./ModalAccountInfo.vue";
import ModalDeleteAlert from "./ModalDeleteAlert.vue";
import {
  MODAL_CREATE_NEW,
  MODAL_ACCT_EDIT,
  MODAL_ACCT_INFO,
  MODAL_DELETE,
} from "@/constants/constants.js";

const modalStore = useModalStore();
const whichModal = computed(() => modalStore.whichModal);
</script>
<style>
#modal_container {
  z-index: 9999;
  background-color: rgba(254, 254, 254, 0.8);
}
</style>
