<script setup lang="ts">
import { ref, computed } from 'vue';
import { useUserStore } from '@KTXC/stores/userStore';
import { useLayoutStore } from '@KTXC/stores/layoutStore';
import LayoutUserMenu from '@KTXC/layouts/menus/LayoutUserMenu.vue';
import NotificationDD from './NotificationDD.vue';
import Searchbar from './SearchBarPanel.vue';
import defaultAvatar from '@KTXC/assets/images/users/avatar-1.png';

const layoutStore = useLayoutStore();
const userStore = useUserStore();
const userAuth = computed(() => userStore.auth);
const userAvatar = computed(() => userStore.getProfileField('avatar') || defaultAvatar);
</script>

<template>
  <v-app-bar elevation="0" height="60">
    <v-btn
      class="hidden-md-and-down text-secondary mr-3"
      color="darkText"
      icon
      rounded="sm"
      variant="text"
      @click.stop="layoutStore.setMiniSidebar(!layoutStore.miniSidebar)"
      size="small"
    >
      <v-icon>mdi-menu-open</v-icon>
    </v-btn>
    <v-btn
      class="hidden-lg-and-up text-secondary ms-3"
      color="darkText"
      icon
      rounded="sm"
      variant="text"
      @click.stop="layoutStore.toggleSidebarDrawer()"
      size="small"
    >
      <v-icon>mdi-menu</v-icon>
    </v-btn>

    <!-- search mobile -->
    <v-menu :close-on-content-click="false" class="hidden-lg-and-up" offset="10, 0">
      <template v-slot:activator="{ props }">
        <v-btn
          class="hidden-lg-and-up text-secondary ml-1"
          color="lightsecondary"
          icon
          rounded="sm"
          variant="flat"
          size="small"
          v-bind="props"
        >
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
      </template>
      <v-sheet class="search-sheet v-col-12 pa-0" width="320">
        <v-text-field persistent-placeholder placeholder="Search here.." color="primary" variant="solo" hide-details>
          <template v-slot:prepend-inner>
            <v-icon>mdi-magnify</v-icon>
          </template>
        </v-text-field>
      </v-sheet>
    </v-menu>

    <!-- ---------------------------------------------- -->
    <!-- Search part -->
    <!-- ---------------------------------------------- -->
    <v-sheet class="d-none d-lg-block" width="250">
      <Searchbar />
    </v-sheet>

    <!---/Search part -->

    <v-spacer />
    <!-- ---------------------------------------------- -->
    <!---right part -->
    <!-- ---------------------------------------------- -->

    <!-- ---------------------------------------------- -->
    <!-- Notification -->
    <!-- ---------------------------------------------- -->
    <NotificationDD />

    <!-- ---------------------------------------------- -->
    <!-- User Profile -->
    <!-- ---------------------------------------------- -->
    <v-menu :close-on-content-click="false" offset="8, 0">
      <template v-slot:activator="{ props }">
        <v-btn class="profileBtn" variant="text" rounded="sm" v-bind="props">
          <div class="d-flex align-center">
            <v-avatar size="32">
              <v-img :src="userAvatar" :alt="userAuth?.label || 'User'" cover />
            </v-avatar>
          </div>
        </v-btn>
      </template>
      <v-sheet rounded="md" width="290">
        <LayoutUserMenu />
      </v-sheet>
    </v-menu>
  </v-app-bar>
</template>
