<template>
  <div class="min-h-12 w-full z-10 top-0 fixed bg-neutral-800 flex justify-between items-center pe-2">
    <div v-if="isHome" @click="$router.push({ path: '/' })"
      class="bg-neutral-800 h-12 flex items-center shadow">
      <Logo dark class="h-8 mx-3" />
    </div>
    <div v-else class="text-sm opacity-80 h-12 flex items-center">
      <div class="ms-3 flex gap-2 items-center text-white" @click="$router.back()">
        <i class="pi pi-arrow-left text-red-500"></i> vissza
      </div>
    </div>
    <div v-if="props.menu">
      <Drawer v-model:visible="menuShow" header=" " position="right" :pt="{ root: 'border-0' }">
        <template #header>
          <div class="flex flex-col">
            <div>{{ auth.user.nev }}</div>
            <div class="text-xs">{{ auth.user.email }}</div>
          </div>

        </template>
        <div class="flex flex-col space-y-3 text-sm">
          <NuxtLink to="/profile">Adataim</NuxtLink>
          <Divider />
          <NuxtLink :to="'/page/' + p.id" v-for="p in config?.config.menu">{{ p.label }}</NuxtLink>
          <!-- <NuxtLink to="/page/72">GYIK</NuxtLink>
                    <NuxtLink to="/page/66">Autóbérlés feltételei</NuxtLink>
                    <NuxtLink to="/page/69">Általános Szerződési Feltételek</NuxtLink>
                    <NuxtLink to="/page/68">Adatvédelmi nyilatkozat</NuxtLink>
                    <NuxtLink to="/page/70">Lemondási és távolmaradási feltételek</NuxtLink>
                    <NuxtLink to="/page/65">Elérhetőség</NuxtLink> -->
          <Divider />
          <NuxtLink @click="logOut()">Kijelentketés</NuxtLink>

        </div>
      </Drawer>
      <Button variant="link" icon="pi pi-calendar" @click="$router.push({ path: '/' })"></Button>
      <Button variant="link" icon="pi pi-user" @click="$router.push({ path: '/profile' })"></Button>
      <Button variant="link" icon="pi pi-bars" @click="menuShow = true"></Button>
    </div>
    <div v-if="props.title">
      {{ props.title }}
    </div>
  </div>
  <div class="h-12"></div>
</template>

<script lang="ts" setup>
const props = defineProps({
  home: {
    type: Boolean,
    default: true
  },
  menu: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: ''
  }
})

const route = useRoute()
const auth = useAuthStore()
const config = useMyConfigStore()

const token = useCookie('_auth')
const menuShow = ref(false)
const router = useRouter()

const isHome = computed(()=>{
    return (route.fullPath === '/')
})

// Swipe gesture handling
const touchStartX = ref(0)
const touchEndX = ref(0)
const minSwipeDistance = 50

function handleTouchStart(e: TouchEvent) {
  touchStartX.value = e.touches[0].clientX
}

function handleTouchEnd(e: TouchEvent) {
  touchEndX.value = e.changedTouches[0].clientX
  handleSwipe()
}

function handleSwipe() {
  const swipeDistance = touchEndX.value - touchStartX.value
  const screenWidth = window.innerWidth

  // Swipe left (from right edge) -> open menu
  if (swipeDistance < -minSwipeDistance && touchStartX.value > screenWidth - 50) {
    if (props.menu) {
      menuShow.value = true
    }
  }

  // Swipe right -> close menu (if open)
  if (swipeDistance > minSwipeDistance && menuShow.value) {
    menuShow.value = false
  }
}

onMounted(() => {
  document.addEventListener('touchstart', handleTouchStart, { passive: true })
  document.addEventListener('touchend', handleTouchEnd, { passive: true })
})

onUnmounted(() => {
  document.removeEventListener('touchstart', handleTouchStart)
  document.removeEventListener('touchend', handleTouchEnd)
})

function logOut(){
    token.value = null
    auth.user = null
    router.push({path:'/login'})
}
</script>

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