<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>
  import { computed, } from 'vue';
  import { useModalStore } from '@/stores/modal.js';
  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";

  
  export default {
    setup() {
      const modalStore = useModalStore();
      const whichModal = computed(() => modalStore.whichModal);

      return {
        modalStore,
        whichModal,
        MODAL_CREATE_NEW,
        MODAL_ACCT_EDIT,
        MODAL_ACCT_INFO,
        MODAL_DELETE,
      };
    },
    components: {
      ModalAccountEditCreate,
      ModalAccountInfo,
      ModalDeleteAlert,
    }
  };
  </script>
<style>
#modal_container {
    z-index: 9999;
    background-color: rgba(254,254,254, 0.8);
}
</style>