<template>
  
  <RouterView />
  <DynamicDialog />
  <ConfirmDialog />
  <Toast position="bottom-right" />
  <Menu ref="menuRef" :model="menu.items" popup />
  <OverlayPanel ref="popup">
    <component :is="popup?.is" />
  </OverlayPanel>
  <Sidebar
    v-model:visible="sidebar.visible"
    position="right"
    class="ml-auto"
    :showCloseIcon="false"
  >
    <component :is="sidebar.is" v-bind="sidebar.props" />
  </Sidebar>
</template>

<script setup>
import DynamicDialog from "primevue/dynamicdialog";
import ConfirmDialog from "primevue/confirmdialog";
import Toast from "primevue/toast";
import { provide, reactive, ref } from "vue";
import { useI18n } from "vue-i18n";
import { useToast } from "primevue/usetoast";
import { useDialog } from "primevue/usedialog";
import { useConfirm } from "primevue/useconfirm";

const { t } = useI18n();
const popup = ref();
const menuRef = ref();
const menu = reactive({ ref: menuRef, items: [] });
const toast = useToast();
const dialog = useDialog();
const sidebar = reactive({});
const confirm = useConfirm();

const service = { confirm, popup, menu, toast, dialog, sidebar, t };

provide("service", service);
</script>

<style lang="scss" scoped></style>
