<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
        v-show="useDragHeader && show_top_pane"
        id="pane-top"
        :style="`height: ${head_data.h}px`"
        class="eexpandable p-3 z-999 bg-gray-200 text-gray-100 dark:bg-gray-800 dark:text-white absolute "
      >
        <Backdrop :show="show_top_pane" :blur="14" :css="`height: ${head_data.h}px;`" @close="close_top_pane" />
        <div class="bg-gray-100 text-gray-900 w-auto p-8 absolute top-2" :class="show_top_pane ? 'z-9999' : ''">
          <keep-alive>
            <component :is="topPaneComponent" />
          </keep-alive>
        </div>
      </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 -->
            <draggable
              v-if="useDragHeader"
              @start="start_header"
              @end="end_header"
            >
              <header class="flex-shrink-0 border-b dark:border-gray-700 border-gray-200">
                <Navbar />
              </header>
            </draggable>
            <div v-else>
              <header class="flex-shrink-0 border-b dark:border-gray-700 border-gray-200">
                <Navbar />
              </header>
            </div>
            <!-- Main content -->
            <main class="flex-1 max-h-full p-1 overflow-hidden overflow-y-scroll  dark:bg-cool-gray-800 dark:text-white">
              <slot />
            </main>
            <!-- Main footer -->
            <draggable
              @start="start_footer"
              @end="end_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 === 'a-click'"
                      :href="itm.link"
                      class=""
                    >
                      {{ t(itm.title) }}
                    </a>
                    <router-link
                      v-if="itm && itm.type === 'router-link'"
                      :title="t(itm.title)"
                      :to="{ name: itm.name_to }"
                      class="flex items-center"
                    >
                      {{ 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 === 'a-click'"
                      :href="itm.link"
                      class=""
                    >
                      <span class="hidden text-sm md:block mr-2"> {{ t(itm.title) }} </span>
                      <span v-if="itm.img" class="w-11 h-11 dark:bg-gray-200 rounded-full mr-2">
                        <dsc-logo v-if="itm.img === 'dsc'" />
                        <img v-else :src="itm.img">
                      </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 rounded-full 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>
                    </router-link>
                  </span>
                </div>
              </footer>
            </draggable>
          </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
        v-show="useDragFooter && show_bottom_pane"
        id="pane-bottom"
        :style="`height: ${bottom_data.h}px; top: ${bottom_data.y}px;`"
        class="eexpandable p-3 z-999 bg-gray-200 text-gray-100 dark:bg-gray-800 dark:text-white absolute"
      >
        <Backdrop :show="show_bottom_pane" :blur="14" :css="`height: 100%$; top: ${bottom_data.y}px;`" @close="close_bottom_pane" />
        <div class="bg-gray-100 w-screen text-gray-900 my-5 pr-5 z-999 absolute top-2">
          <keep-alive>
            <component :is="bottomPaneComponent" />
          </keep-alive>
        </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 { toRefs, onMounted, onUnmounted, ref, computed } from 'vue'
import { VueDraggableNext as draggable } from 'vue-draggable-next'

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 Backdrop from '@/global/Backdrop.vue'
import ReqErrorView from '@/ReqErrorView.vue'
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
import useState from '~/hooks/useState'
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, useDragHeader, useDragFooter } = 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, locale } = 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(() => {
  return defs.value && defs.value.footer && defs.value.footer.left_items ? defs.value.footer.left_items : []
})
const right_items = computed(() => {
  return defs.value && defs.value.footer && defs.value.footer.right_items ? defs.value.footer.right_items : []
})

onMounted(() => {
  window.addEventListener('resize', checkScreen)
  isCheckin.value = false
})

const head_data = ref({ x: 0, y: 0, h: 0 })
const start_header = (ev: any) => {
  head_data.value = { x: ev.originalEvent.pageX, y: ev.originalEvent.pageY, h: 0 }
//  console.log(`start header: ${ev.originalEvent.clientX} (${ev.originalEvent.screenX}) ${ev.originalEvent.pageX}  / ${ev.originalEvent.clientY} (${ev.originalEvent.screenY}) ${ev.originalEvent.pageY} `)
}
const end_header = (ev: any) => {
  // console.log(`end header: ${ev.originalEvent.clientX} (${ev.originalEvent.screenX}) ${ev.originalEvent.pageX}  / ${ev.originalEvent.clientY} (${ev.originalEvent.screenY}) ${ev.originalEvent.pageY} `)
  // console.log(`target: ${head_data.value.x - ev.originalEvent.pageX}  ${ev.originalEvent.pageY - head_data.value.y} `)
  head_data.value.h = ev.originalEvent.pageY - head_data.value.y
  // console.log(head_data.value.h)
  show_top_pane.value = true
}
const close_top_pane = () => {
  show_top_pane.value = false
}

const bottom_data = ref({ x: 0, y: 0, h: 0 })
const start_footer = (ev: any) => {
  if (useDragFooter.value)
    bottom_data.value = { x: ev.originalEvent.pageX, y: ev.originalEvent.pageY, h: 0 }
}
const end_footer = (ev: any) => {
  if (useDragFooter.value) {
    // console.log(`end footer: ${ev.originalEvent.clientX} (${ev.originalEvent.screenX}) ${ev.originalEvent.pageX}  / ${ev.originalEvent.clientY} (${ev.originalEvent.screenY}) ${ev.originalEvent.pageY} `)
    // console.log(`target: ${bottom_data.value.x - ev.originalEvent.pageX}  ${ev.originalEvent.pageY - bottom_data.value.y} `)
    bottom_data.value.h = (ev.originalEvent.pageY - bottom_data.value.y) * -1
    bottom_data.value.y = ev.originalEvent.pageY
    // console.log(bottom_data.value.h)
    // console.log(bottom_data.value.y)
    show_bottom_pane.value = true
  }
}
const close_bottom_pane = () => {
  show_bottom_pane.value = false
}

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

onMounted(() => {
})

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

</script>
<style scoped>
.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>
