<template>
  <div class="app-layout">
    <aside class="app-sidebar" :style="{ width: sidebarWidth }">
      <Sidebar />
    </aside>

    <main class="app-main">
      <div class="main-content-wrapper">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { useLayoutStore } from "@/stores/layoutStore";
import { useSettingsStore } from "@/stores/settingsStore";
import Sidebar from "./Sidebar.vue";

const layoutStore = useLayoutStore();
const settingsStore = useSettingsStore();
const router = useRouter();

const sidebarWidth = computed(() => {
  return layoutStore.actualSidebarWidth;
});

window.__openSettings = () => {
  router.push('/settings');
};

onMounted(async () => {
  await settingsStore.loadSettings();
  settingsStore.applyTheme();
  settingsStore.applyFontSize();
});
</script>

<style scoped>
@import "@/styles/app-layout.css";

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
