﻿<template>

  <header class="py-1 flex items-center justify-between bg-white shadow-md shadow-gray-700 z-20">

    <div v-if="showPopup"
         ref="popupRef"
         class="bg-white shadow-md shadow-gray-700 top-16 left-0 absolute z-50 rounded-br-2xl border-t-2 border-gray-800"
         @mouseleave="handleMouseLeave"
         @mouseenter="handleMouseEnter">
      <SiteMenu></SiteMenu>
    </div>

    <div class="flex items-center">
      <v-app-bar-nav-icon @click.stop="drawer = !drawer">
      </v-app-bar-nav-icon>

      <RouterLink to="/">
        <v-img src="/medias/hutopy.png"
               ref="popupButtonRef"
               alt="Hutopy Logo"
               class="mr-2 h-10 w-20"
               @mouseenter="togglePopup(true)">
        </v-img>
      </RouterLink>
    </div>


    <div class="flex items-center">
      <v-text-field
          v-model="searchQuery"
          placeholder="Search"
          hide-details
          clearable
          class="rounded-full mx-2 w-80"
          append-inner-icon="mdi-magnify"
          @click:append-inner="onSearch">
      </v-text-field>

      <v-icon class="mx-2">mdi-bell-outline</v-icon>

      <span class="flex items-center mx-2">
        
      <span class="text-black text-base font-sans font-medium mr-3">
      {{ currentUserName }}
      </span>
  
      <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
           class="rounded-circle h-10 w-10"
           alt="Logo"/>        
      </span>

    </div>

  </header>

</template>


<script setup>
import {ref, onMounted, onUnmounted} from 'vue';
import {useRouter} from 'vue-router';
import SiteMenu from "@/views/main/SiteMenu.vue";


const showPopup = ref(false);
const popupRef = ref(null);
const popupButtonRef = ref(null);
let mouseLeaveTimeout = null;

const togglePopup = (state) => {
  clearTimeout(mouseLeaveTimeout)
  showPopup.value = state
};

// Function to handle mouse enter event
const handleMouseEnter = () => {
  clearTimeout(mouseLeaveTimeout);
};

// Function to handle mouse leave event
const handleMouseLeave = () => {
  mouseLeaveTimeout = setTimeout(() => {
    showPopup.value = false;
  }, 200);
};

// Add event listener for clicks outside the popup when component is mounted
onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

// Remove event listener when component is unmounted
onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});

// Function to handle clicks outside the popup
const handleClickOutside = (event) => {
  if (popupRef.value
      && !popupRef.value.contains(event.target)
      && popupButtonRef.value
      && !popupButtonRef.value.contains(event.target)) {
    showPopup.value = false;
  }
};


const currentUserName = 'Jo Bumble'
const searchQuery = ref('');
const router = useRouter();

const onSearch = () => {
  const query = searchQuery.value.trim();

  if (!query) {
    router.push('/browse');
  } else {
    const words = query.split(' ');

    if (words.length === 1) {
      router.push(`/@${words[0]}`);
    } else {
      router.push({name: 'browse', query: {q: query}});
    }
  }
};
</script>
