<script setup>
import { RouterView, useRoute } from "vue-router";
import TitleBar from "./components/titlebar-element.vue";
import BottomNavbar from "./components/bottom-navbar.vue";
import DateSelector from "./components/date-selector.vue";
import LoadingElement from "./components/loading-element.vue";
import { loading, loadingProgress, loadingFailed, theme } from "./store";
import { computed, ref } from "vue";

const autoThemes = { true: "dark", false: "light" };
const autoTheme = ref("dark");
const colorSchemeMedia = window.matchMedia("(prefers-color-scheme: dark)");
autoTheme.value = autoThemes[colorSchemeMedia.matches];
colorSchemeMedia.addEventListener(
  "change",
  (e) => (autoTheme.value = autoThemes[e.matches])
);

const route = useRoute();
const routeName = computed(() => route.name);
const isDataView = computed(() => {
  return (
    routeName.value != "title.settings" && routeName.value != "title.login"
  );
});
</script>

<template>
  <div
    class="app"
    :class="theme == 'auto' ? `theme-${autoTheme}` : `theme-${theme}`"
  >
    <TitleBar />
    <LoadingElement
      :active="loading"
      :progress="loadingProgress"
      :error="loadingFailed"
    />
    <div class="center">
      <main>
        <DateSelector v-show="isDataView" />
        <RouterView />
      </main>
      <BottomNavbar v-show="$route.name != 'title.login'" />
    </div>
  </div>
</template>

<style>
@import "./assets/base.css";
@import "./assets/themes.css";

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  color-scheme: dark;
}

.app {
  display: grid;
  grid-template-rows: auto auto 1fr;
  color: var(--text-color);
  background-color: var(--bg-color);
  font-family: var(--font-family);
}

.center {
  display: flex;
  justify-content: center;
  overflow: auto;
}

main {
  width: 100%;
  max-width: 900px;
  overflow: hidden;
}
</style>
