<script setup lang="ts">
import Navbar from "./components/Navbar.vue";
import Dialog from "./components/Dialog.vue";
import { Alert, useAlertProvider } from "./components/Alert";
import { ref, provide, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useThemeStore } from "./stores/theme";

const router = useRouter();
const theme = useThemeStore();

// 主题切换状态管理
const isDarkMode = ref(theme.isDarkTheme());

// Navbar显示状态管理
const showNavbar = ref(true);

// 切换Navbar显示状态
const toggleNavbar = () => {
  showNavbar.value = !showNavbar.value;
};

// 初始化主题设置
onMounted(() => {
  // 应用初始主题
  applyTheme();

  // 监听系统主题变化
  window
    .matchMedia("(prefers-color-scheme: dark)")
    .addEventListener("change", (e) => {
      // 跟随系统变化
      isDarkMode.value = e.matches;
      applyTheme();
    });
});

// 应用主题到文档
const applyTheme = () => {
  document.documentElement.setAttribute(
    "data-theme",
    isDarkMode.value ? "night" : "winter",
  );
};

// 切换主题
const toggleTheme = () => {
  isDarkMode.value = !isDarkMode.value;
  theme.toggleTheme();
  applyTheme();
};

// 提供主题状态和切换方法给子组件
provide("theme", {
  isDarkMode,
  toggleTheme,
});

// 提供Navbar控制给子组件
provide("navbar", {
  showNavbar,
  toggleNavbar,
});

const currentRoutePath = computed(() => {
  return router.currentRoute.value.path;
});

useAlertProvider();
</script>

<template>
  <div>
    <header class="relative" :class="{ 'navbar-hidden': !showNavbar }">
      <Navbar v-show="showNavbar" />
      <Dialog />
      <Alert />
    </header>

    <main>
      <RouterView />
    </main>

    <footer
      v-if="currentRoutePath != '/project'"
      class="footer footer-center p-4 bg-base-300 text-base-content"
    >
      <div>
        <p>Copyright © 2023 - All right reserved by OurEDA</p>
      </div>
    </footer>
  </div>
</template>

<style scoped>
/* 特定于App.vue的样式 */
header {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top;
}

.navbar-hidden {
  transform: scaleY(0);
  height: 0;
  overflow: hidden;
}

/* Navbar显示/隐藏动画 */
header .navbar {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: top;
}

/* 当header被隐藏时，确保navbar也相应变化 */
.navbar-hidden .navbar {
  opacity: 0;
}
</style>
