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

const props = defineProps<{
  sideBarCollapsed: boolean
}>()

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

const signOut = async (close: () => Promise<boolean>) => {
  await firebaseSignOut()
  close()
}

const authUI: any = inject('firebaseAuthUI')
const authModalInitialStateOpen = ref(authUI.isPendingRedirect())
</script>
<template>
  <div class="fixed left-0 right-0 top-0 z-[500] flex h-[50px] bg-primary">
    <div class="mx-auto flex w-full max-w-app items-center py-2.5 text-white">
      <div class="flex items-center pl-3" :class="sideBarCollapsed ? 'w-fit' : 'w-sidebar 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="initialized">
          <SearchBar />
          <button
            class="btn-outline btn-sm btn py-1 text-white"
            @click="addNote('Untitled new note', '', true)"
          >
            <i class="fas fa-plus-circle text-[1.1rem]" />
          </button>
          <Modal v-if="initialized && !user" :open="authModalInitialStateOpen">
            <template #activator="{ open }">
              <button class="btn-outline btn-sm btn py-1 text-white" @click="open">Sign in</button>
            </template>
            <template #title>Sign in</template>
            <template #default="{ close }">
              <Auth @signedIn="close" />
            </template>
            <template #actions="{ close }">
              <button class="btn-sm btn" @click="close">Close</button>
            </template>
          </Modal>
          <template v-else-if="user">
            <div class="dropdown-end dropdown">
              <label tabindex="0" class="btn-outline btn-sm btn py-1 text-white">
                <i class="fa-fw fa-solid fa-user-gear" />
              </label>
              <ul
                tabindex="0"
                class="dropdown-content menu rounded-box menu-compact mt-1 w-52 bg-base-100 p-2 text-base-content shadow"
              >
                <Modal>
                  <template #activator="{ open }">
                    <li @click="open" class="text-base">
                      <a>
                        <i class="fa-fw fa-solid fa-right-from-bracket" />
                        Sign out
                      </a>
                    </li>
                  </template>
                  <template #title>Sign out</template>
                  <template #default>Are you sure want to signout?</template>
                  <template #actions="{ close }">
                    <button class="btn-sm btn" @click="close">Cancel</button>
                    <button class="btn-primary btn-sm btn" @click="signOut(close)">Sign out</button>
                  </template>
                </Modal>
              </ul>
            </div>
          </template>
        </template>
        <SkeletonTopBar v-else />
      </div>
    </div>
  </div>
</template>
<style lang="css">
#logo {
  @apply cursor-pointer transition-all duration-200 hover:text-primary;
}
#logo:hover {
  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white;
}
.btn-outline {
  @apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
}
</style>
