<script setup lang="ts">
import { addNote, setActiveNote, rootNote } from '@/composables/useNotes'
import { user } from '@/composables/useFirebase'
import { initialized } from '@/composables/useFirebase'

const loading = inject<boolean>('loading')

const props = withDefaults(
  defineProps<{
    sideBarCollapsed: boolean
    height?: number
  }>(),
  {
    height: 52
  }
)

const emit = defineEmits<{
  toggleSideBar: []
}>()

const searchActive = ref<boolean>(false)

const authUI: any = inject('firebaseAuthUI')
const authPending = ref<boolean>(authUI.isPendingRedirect())

const handleSignIn = async (close: () => Promise<boolean>) => {
  await close()
  authPending.value = false
}
</script>
<template>
  <div class="z-[500] flex items-end bg-primary" :class="searchActive && 'search-active'">
    <div
      class="mx-auto flex w-full max-w-app items-center py-2.5 text-white"
      :style="{ height: `${props.height}px` }"
    >
      <div
        class="search-active-hide flex items-center pl-3"
        :class="sideBarCollapsed ? 'w-fit' : 'max-sm:w-fit md:w-sidebar md:pr-3'"
      >
        <Hamburger
          :side-bar-collapsed="props.sideBarCollapsed"
          @toggle-side-bar="emit('toggleSideBar')"
        />
        <Logo
          class="ml-auto pl-5 text-2xl hover:drop-shadow"
          id="logo"
          @click="setActiveNote(rootNote?.id)"
        />
      </div>
      <div class="flex h-full flex-grow flex-row items-center gap-2 pl-5 pr-3">
        <template v-if="!loading || authPending">
          <SearchBar @active="(active) => (searchActive = active)" />
          <UIButton
            size="sm"
            variant="outline"
            class="search-active-hide topbar-button text-white"
            @click="addNote('Untitled new note', '', true)"
          >
            <i class="fa-fw fa-solid fa-plus-circle scale-[115%]" />
          </UIButton>
          <UIModal v-if="(initialized && !user) || authPending" :open="authPending">
            <template #activator="{ open }">
              <UIButton
                size="sm"
                variant="outline"
                class="search-active-hide topbar-button py-1 text-white"
                @click="open"
              >
                Sign in
              </UIButton>
            </template>
            <template #title>{{ authPending ? 'Signing in...' : 'Sign in' }}</template>
            <template #default="{ close }">
              <Auth @signedIn="handleSignIn(close)" :authenticating="authPending" />
            </template>
            <template #actions="{ close }">
              <UIButton size="sm" @click="close">Close</UIButton>
            </template>
          </UIModal>
          <Settings v-else-if="user" />
        </template>
        <SkeletonTopBar v-else />
      </div>
    </div>
  </div>
</template>
<style lang="scss">
#logo {
  @apply cursor-pointer transition-all duration-200 hover:text-primary;
}
@media (hover: hover) and (pointer: fine) {
  #logo:hover {
    text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white;
  }
}
#logo:active {
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white;
}
.topbar-button {
  @apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
}

.search-active {
  .search-active-hide {
    @apply max-sm:hidden;
  }
}
</style>
