<template>
  <v-app-bar scroll-behavior="elevate" scroll-threshold="200">
    <v-app-bar-nav-icon v-if="!props.hideNavIcon" @click="drawer = !drawer"></v-app-bar-nav-icon>

    <template #append>
      <v-btn icon="mdi-theme-light-dark" variant="text" class="mx-2" @click="toggleTheme" />

      <v-menu offset="10px" :close-on-content-click="false">
        <template #activator="{ props }">
          <v-btn fab variant="text" icon v-bind="props" class="mx-2">
            <AvatarMain :image-src="currentUser?.profile" :name="name" />
          </v-btn>
        </template>

        <v-card width="350" max-height="600px" elevation="2" rounded="xl" class="pa-4">
          <v-row no-gutters>
            <v-col cols="12">
              <v-row no-gutters justify="center">
               <AvatarMain :image-src="currentUser?.profile" :name="name" />
              </v-row>
            </v-col>

            <v-col cols="12" class="text-center mt-2 mb-4">
              {{ name }}
            </v-col>

            <v-col cols="12" class="mb-3">
              <v-btn v-if="APP_NAME.toLowerCase() !== 'account'" block rounded="xl" variant="tonal" size="x-large"
                class="text-none text-subtitle-1 font-weight-regular" @click="redirect(APP_ACCOUNT, 'home')">
                Manage Account
              </v-btn>
            </v-col>

            <v-col cols="12">
              <v-btn block rounded="xl" variant="tonal" size="x-large"
                class="text-none text-subtitle-1 font-weight-regular" @click="logout()">
                Logout
              </v-btn>
            </v-col>
          </v-row>
        </v-card>
      </v-menu>
    </template>
  </v-app-bar>
</template>

<script setup lang="ts">
import { useTheme } from "vuetify";

const props = defineProps({
  hideNavIcon: {
    type: Boolean,
    default: false,
  },
});

const menu = defineModel("menu", { type: Boolean });

const search = defineModel("search", { type: String });

const { drawer } = useLocal();

const { redirect } = useUtils();

const { APP_ACCOUNT, APP_MAIN, APP_NAME } = useRuntimeConfig().public;

const theme = useTheme();

function toggleTheme() {
  theme.global.name.value = theme.global.current.value.dark ? "light" : "dark";
}

const { currentUser } = useLocalAuth();

const profile = computed(() => {
  return `/api/public/${currentUser.value?.profile}`;
});

function logout() {
  if (APP_NAME.toLowerCase() !== "main") {
    redirect(APP_MAIN, "logout");
    return;
  }

  useRouter().push({ name: "logout" });
}

const name = computed(() => {
  const user = currentUser.value;
  if(!user) return "";

  const first = user?.firstName?.trim() || ""
  const last = user?.lastName?.trim() || ""
  const full = [first, last].filter(Boolean).join(" ")

  if(full) return full;

  const alternative = user?.name?.trim();
  return alternative || ""

})


const { getNameInitials } = useUtils();
</script>

<style scoped>
.APP_NAME {
  display: inline-block;
  word-wrap: break-word;
  white-space: normal;
  text-align: center;
  color: unset !important;
}

.open-list {
  transition: transform 0.2s ease-in-out;
  transform: rotate(180deg);
}

.close-list {
  transition: transform 0.3s ease-in-out;
  transform: rotate(0deg);
}

.v-list-group__items .v-list-item {
  padding-inline-start: 32px !important;
}
</style>
