<template>
  <div v-if="isCheckin">
    <div class="spinner" style="margin: 100px auto; width: 80px; height: 80px;">
      <div class="dot1" />
      <div class="dot2" />
    </div>
    <div class="flex justify-center text-2xl">
      {{ t('message.loadding') }} ...
    </div>
  </div>
  <div v-else>
    <div>
      <div class="antialiased text-gray-900 bg-white dark:bg-gray-800 dark:text-white">
        <div class="flex h-screen overflow-y-hidden bg-white">
          <!-- Sidebar -->
          <Sidebar />

          <div class="flex flex-col flex-1 h-full overflow-hidden">
            <!-- Navbar -->
            <header class="flex-shrink-0 border-b dark:border-gray-700 border-gray-200">
               <Navbar @on-nav-menu="onNavMenu" />
            </header>
            <!-- Main content -->
            <main class="flex-1 max-h-full overflow-hidden overflow-y-scroll  dark:bg-cool-gray-800 dark:text-white">
              <slot />
            </main>
            <!-- Main footer -->
						<footer class="flex items-center justify-between flex-shrink-0 p-4 border-t dark:border-gray-700 border-gray-200 max-h-14  dark:bg-cool-gray-800 dark:text-white">
							<div class="flex">
								<span
									v-for="(itm,index) in left_items"
									:key="`${String(index)}-${itm.title}`"
								>
									<a
										v-if="itm && itm.type === NavItemType.app_link"
										:href="itm.href"
										class="text-xs"
									>
										{{ t(itm.title) }}
									</a>
									<router-link
										v-if="itm && itm.type === 'router_link'"
										:title="t(itm.title)"
										:to="{ name: itm.name_to }"
										class="small-text flex items-center text-shadow-xs"
									>
										{{ t(itm.title) }}
									</router-link>
								</span>
							</div>
							<div class="text-sm">
								<Footer />
							</div>
							<div class="flex">
								<span
									v-for="(itm,index) in right_items"
									:key="`${String(index)}-${itm.title}`"
								>
									<a
										v-if="itm && itm.type === NavItemType.app_link"
										:href="itm.href"
										class="flex items-center"
									>
										<span class="hidden text-sm md:block mr-2"> {{ t(itm.title) }} </span>
										<span v-if="itm.img" class="w-11 h-11 mr-2">
											<app-img v-if="itm.img === 'librecloudd'" />
											<img v-else class="h-11 w-auto rounded" :src="`/assets/images/${itm.img}.svg`" alt="App">
										</span>
									</a>
									<router-link
										v-if="itm && itm.type === 'router_link'"
										:title="t(itm.title)"
										:to="{ name: itm.name_to }"
										class="flex items-center"
									>
										<span class="hidden text-sm md:block mr-2"> {{ t(itm.title) }} </span>
										<span v-if="itm.img" class="w-11 h-11 mr-2">
											<app-img v-if="itm.img === 'librecloudd'" />
											<img v-else class="h-11 w-auto" :src="`/assets/images/${itm.img}.svg`" alt="App">
										</span>
									</router-link>
								</span>
							</div>
						</footer>
          </div>
          <!-- Setting panel button -->
          <div v-if="sideSettingButton" v-show="useSettings" class="fixed right-0 transform rotate-90 translate-x-8 top-1/2">
            <Button class="text-sm font-medium z-999 text-white uppercase bg-gray-600" @click="isSettingsPanelOpen = true">
              Settings
            </Button>
          </div>
          <SettingsPanel :show="isSettingsPanelOpen" @close="isSettingsPanelOpen = false" />
          <SearchPanel left :show="isSearchPanelOpen" @close="isSearchPanelOpen = false" />
          <NotificationsPanel left :show="isNotificationsPanelOpen" @close="isNotificationsPanelOpen = false" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/*
  <suspense v-else>
      <template #default>
      </template>
      <template #fallback>
        <div class="space-up">
          <div class="spinner" style="margin: 100px auto; width: 80px; height: 80px;">
            <div class="dot1" />
            <div class="dot2" />
          </div>
          <div class="flex justify-center text-2xl">
            Check-in ...
          </div>
        </div>
      </template>
    </suspense>

       <div>
        <a
          href="https://karyo.dev"
          target="_blank"
          class="flex items-center space-x-1"
        >

          <span class="w-11 h-11 dark:bg-gray-200 rounded-full mr-2">
            <dsc-logo />
          </span>
          <span class="hidden text-sm md:block">Z-Terton</span>

        </a>
      </div>
*/
import { onMounted, onUnmounted, ref, computed } from 'vue'

import { useRouter } from 'vue-router'
import Sidebar from '@/sidebar/Sidebar.vue'
import Navbar from '@/navbar/Navbar.vue'
import SettingsPanel from '@/panels/SettingsPanel.vue'
import SearchPanel from '@/panels/SearchPanel.vue'
import NotificationsPanel from '@/panels/NotificationsPanel.vue'
import Button from '@/global/Button.vue'
import Footer from '@/Footer.vue'
import AppImg from '@/icons/AppImg.vue'
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
import useState from '~/hooks/useState'
import { SideMenuItemType } from '~/typs/cmpnts'
import { NavItemType } from '~/typs'

// import { AppDefsAction } from '~/store/types'
// import useComponent, { DynComponent } from '~/hooks/useComponent'
// import { check_credentials } from '~/hooks/utils'

//const { reqError, isSidebarOpen, isAsidePanelOpen, isSettingsPanelOpen, isSearchPanelOpen, isNotificationsPanelOpen, sideSettingButton } = useState()
const { isSidebarOpen, isSettingsPanelOpen, isSearchPanelOpen, isNotificationsPanelOpen, sideSettingButton, useSettings } = useState()

const checkScreen = () => {
  if (window.innerWidth <= 1024)
    isSidebarOpen.value = false
}

// const props = defineProps<{
//   appdefs: any
// }>()
// const { appdefs } = toRefs(props)

// const use_panels = true
// const show_top_pane = ref(false)
// const show_bottom_pane = ref(false)

const isCheckin = ref(true)
const { t } = useI18n()
const router = useRouter()
const map_key = router.currentRoute.value.meta.uiMapkey || 'ui'

const store = useStore()

const defs = computed(() => store.state.app_defs.main.get(map_key) || {})

const left_items = computed((): SideMenuItemType[]  => {
  return defs.value && defs.value.footer && defs.value.footer.left_items ? defs.value.footer.left_items : [] as SideMenuItemType[]
})
const right_items = computed((): SideMenuItemType[]  => {
  return defs.value && defs.value.footer && defs.value.footer.right_items ? defs.value.footer.right_items : [] as SideMenuItemType[]
})

const onNavMenu = (itm: SideMenuItemType) => {
	useState().show_profile.value = true
}
onMounted(() => {
  window.addEventListener('resize', checkScreen)
  isCheckin.value = false
})

// const topPaneComponent = computed(() => useComponent().topPaneComponent.value)
// const bottomPaneComponent = computed(() => useComponent().bottomPaneComponent.value)
// const root_url = router.currentRoute.value.meta.rooturl || ''

onUnmounted(() => {
  window.removeEventListener('resize', checkScreen)
})

</script>
<style scoped>
.small-text {
	font-size: 75%;
}
.expandable {
  background: #dadada;
  overflow: hidden;

  transition: all .5s ease-in-out;
  line-height: 0;
  padding: 0 1em;
  color: transparent;
}
.expandable:target {
  line-height: 1.5;
  padding-top: 1em;
  padding-bottom: 1em;
  color: black;
}
</style>
