<template>
  <NuxtLoadingIndicator />
  <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>
  <DynamicDialog />
  <Toast position="bottom-right" class="!rtl" />
  <Menu ref="menuRef" :model="menu.items" popup />
  <NuxtPage :page-key="route => route.fullPath" />
</template>

<script setup>
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 { isMobile } = useDevice()
const {
  breakpoint: device = isMobile ? 'mobile' : 'desktop'
} = useViewport()


dialog.show = (component, data = {}, props = {}) => dialog.open(component, {
  props: {
    modal: true,
    position: device.value == 'desktop' ? 'center' : 'bottom',
    closable: false,
    ...props
  },
  data
})

provide('service', { device, popup, menu, toast, dialog, sidebar, t })

const categories = useCategoriesStore()
categories.get()

const user = useUserStore()
user.get()
</script>

<style lang="scss">
.p-toast-message-text {
  @apply ml-0 mr-4;
}

.p-sidebar {
  @apply w-max;

  &>* {
    @apply p-0;
  }
}
</style>