<script setup>
import { onMounted, ref, watch } from "vue";
import All_new_section from "./components/Naw_bar/All_new_section.vue";
import General_section from "./components/News_section/General_section.vue";
import Setings from "./components/Settings_section/Setings.vue";
import Authe from "./components/Autherization/Authe.vue";
import Istochnik from "./components/Istochnik_section/Istochnik.vue";

// Инициализация темы при загрузке приложения
onMounted(() => {
  const savedTheme = localStorage.getItem("theme");
  if (savedTheme === "dark") {
    document.documentElement.classList.add("dark");
  } else if (savedTheme === "light") {
    document.documentElement.classList.remove("dark");
  } else {
    // Проверяем системные настройки
    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
      document.documentElement.classList.add("dark");
    }
  }
});

// Состояния страницы и данные для входа
const currentPage = ref("admin-panel");

function handleUpdate(newValue) {
  currentPage.value = newValue; // изменение значения в родителе
}
</script>


<template>
  <Authe :currentPage="currentPage" @update="handleUpdate" />
  <div v-if="currentPage === 'rezylt'">
    <div class="sm:flex">
      <All_new_section :currentPage="currentPage" @update="handleUpdate" />
      <General_section filter="all" />
    </div>
  </div>

  <div v-if="currentPage === 'setings'">
    <div class="sm:flex">
      <All_new_section :currentPage="currentPage" @update="handleUpdate" />
      <Setings />
    </div>
  </div>

  <!-- <div v-if="currentPage === 'status'">
    <div class="sm:flex">
      <All_new_section :currentPage="currentPage" @update="handleUpdate" />
      <General_section filter="status" />
    </div>
  </div> -->

  <div v-if="currentPage === 'istochnik'">
    <div class="sm:flex">
      <All_new_section :currentPage="currentPage" @update="handleUpdate" />
      <Istochnik />
    </div>
  </div>
</template>

<style>

</style>
