<script setup lang="ts">
import { ref } from "vue";

const isDarkTheme = ref(false);

const toggleDarkMode = () => {
  isDarkTheme.value = !isDarkTheme.value;
  document.documentElement.classList.toggle("app-dark");
};

const toggleMenu = () => {
  document.getElementsByClassName("layout-wrapper")[0]?.classList.toggle("layout-static-inactive");
};
</script>

<template>
  <nav class="layout-topbar">
    <div class="layout-topbar-logo-container">
      <button class="layout-menu-button layout-topbar-action" @click="toggleMenu">
        <i class="pi pi-bars"></i>
      </button>

      <nuxt-link to="/" class="layout-topbar-logo">
        <img src="@/assets/images/logo.png" alt="Two stick silhouettes admiring fireworks in the sky" />
        <span>Glowing Fiesta</span>
      </nuxt-link>
    </div>

    <div class="layout-topbar-actions">
      <div class="layout-config-menu">
        <button type="button" class="layout-topbar-action layout-topbar-action-highlight" @click="toggleDarkMode">
          <i :class="['pi', { 'pi-moon': isDarkTheme, 'pi-sun': !isDarkTheme }]"></i>
        </button>
      </div>

      <Divider layout="vertical" />

      <div class="layout-topbar-menu hidden lg:block">
        <div class="layout-topbar-menu-content">
          <button type="button" class="layout-topbar-action">
            <i class="pi pi-calendar"></i>
            <span>Calendar</span>
          </button>
          <button type="button" class="layout-topbar-action">
            <i class="pi pi-inbox"></i>
            <span>Messages</span>
          </button>
          <button type="button" class="layout-topbar-action">
            <i class="pi pi-user"></i>
            <span>Profile</span>
          </button>
        </div>
      </div>
    </div>
  </nav>
</template>
