<script setup lang="ts">
import { SidebarTrigger } from '@/components/ui/sidebar'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { WT1iser } from '@/lib/wt1'
import { useRouter } from 'vue-router'

const emit = defineEmits<{
  (e: 'view-home'): void
}>()

defineProps<{
  sidebarOpen: boolean
}>()

const router = useRouter()

const handleHome = () => {
  WT1iser.viewHome()
  router.push({ name: 'Home' })
  emit('view-home')
}
</script>

<template>
  <!-- MOBILE MODE (below md) -->
  <div class="block md:hidden">
    <header class="flex items-center justify-between px-1 py-2 h-14 border-b border-border">
      <div class="flex items-center pl-3 hover:cursor-pointer">
        <img
          src="@/assets/dataiku-logo.png"
          alt="Dataiku Logo"
          class="h-8 w-8"
          @click="handleHome"
        />
      </div>
      <div class="flex items-center">
        <SidebarTrigger class="py-2 px-2 mx-1 text-gray-600 hover:text-primary-hover">
          <i class="dku-icon-left-panel-close-16"></i>
        </SidebarTrigger>
      </div>
    </header>
  </div>

  <!-- DESKTOP MODE (md and above) -->
  <div class="hidden md:flex h-full">
    <div
      class="w-full flex justify-between py-2.5"
      :class="{ 'border-border md:border-b': sidebarOpen }"
    >
      <template v-if="sidebarOpen">
        <div class="flex items-center pl-3 hover:cursor-pointer">
          <img
            src="@/assets/dataiku-logo.png"
            alt="Dataiku Logo"
            class="h-8 w-8"
            @click="handleHome"
          />
        </div>
      </template>

      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger as-child>
            <SidebarTrigger class="py-2 px-2 mx-1 hover:bg-primary-alpha-light-30 w-[31px]">
              <i v-if="sidebarOpen" class="dku-icon-left-panel-close-16"></i>
              <i v-else class="dku-icon-left-panel-open-16"></i>
            </SidebarTrigger>
          </TooltipTrigger>
          <TooltipContent :side-offset="10" hide-arrow side="right" v-if="!sidebarOpen">
            <p>Open sidebar</p>
          </TooltipContent>
          <TooltipContent :side-offset="10" hide-arrow side="right" v-if="sidebarOpen">
            <p>Close sidebar</p>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </div>
  </div>
</template>
