<template>
  <div class="main-w" v-if="loaded">
    <Header />
    <SideMenu />
    <main :style="[mainWrapperWidth]" :class="[globalStore.menuLoaded ? 'animate' : '']">
      <slot />
    </main>
    <Footer />
    <panel-wrapper
      v-if="globalStore.notificationPanel"
      v-model="globalStore.notificationPanel"
      :panel-title="'Bildirimler'">
      <template #panelContent>
        <notification-content />
      </template>
    </panel-wrapper>
    <toasts />
  </div>
</template>
<script setup lang="ts">
  import { ref, computed, onBeforeMount, onMounted } from 'vue'
  import { useGlobalStore } from '@/stores/globalStore'
  const globalStore = useGlobalStore()
  import { useDataStore } from '@/stores/dataStore'
  const dataStore = useDataStore()
  import { useUsersStore } from '@/stores/usersStore'
  const usersStore = useUsersStore()
  import { usePageStore } from '@/stores/pageStore'
  const pageStore = usePageStore()
  import { useRoute } from 'vue-router'
  const route = useRoute()

  import Header from '@/layouts/admin-inc/Header.vue'
  import SideMenu from '@/layouts/admin-inc/SideMenu.vue'
  import Footer from '@/layouts/admin-inc/Footer.vue'
  import PanelWrapper from '@/components/PanelWrapper.vue'
  import NotificationContent from '@/views/contents/NotificationContent.vue'

  const loaded = ref<boolean>(false)
  const body = document.getElementById('app')

  const mainWrapperWidth = computed(() => {
    if (globalStore.screenWidth > globalStore.breakPoints.tablet) {
      if (globalStore.sideMenu) {
        return (
          'padding-left:' +
          Number(globalStore.sideMenuWidth + globalStore.mainPadding) +
          'px'
        )
      } else {
        return 'padding-left:' + globalStore.mainPadding + 'px'
      }
    } else {
      return ''
    }
  })

  const WrapperClass = () => {
    if (body) {
      if (route.name === 'Dashboard') body.setAttribute('class', 'main-page')
      else body.setAttribute('class', 'main-w')
    }
  }

  onBeforeMount(async () => {
    usersStore.SetUserData()

    if (!usersStore.isPanelUser && usersStore.userIsAuth && !pageStore.IsAuthPage()) {
      let tip = await dataStore.dataGet('Auth/uyedurumkontrol/' + usersStore.userId)

      if (tip !== 'errorfalse') {
        usersStore.userApproveId = tip.userIslemtipi
      }
    }
    loaded.value = true
  })

  onMounted(() => {
    WrapperClass()
  })
</script>
