<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,
  selectedDate,
  selectedDay,
  changeDay,
  changeDate,
} 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 isDataView = computed(() => route.meta.dataView || false);
</script>

<template>
  <div
    class="app"
    :class="theme == 'auto' ? `theme-${autoTheme}` : `theme-${theme}`"
  >
    <TitleBar />
    <LoadingElement
      :active="loading"
      :progress="loadingProgress"
      :error="loadingFailed"
    />
    <div class="center">
      <div class="container">
        <DateSelector
          :selectedDate="selectedDate"
          :selectedDay="selectedDay"
          @changeDay="(inc) => (changeDay += inc)"
          @changeDate="(date) => (changeDate = date)"
          v-show="isDataView"
        />
        <main>
          <div class="wrapper">
            <RouterView />
          </div>
        </main>
      </div>
      <BottomNavbar v-show="!$route.meta.hideNav" />
    </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;
  /* Make the loading bar 0px in height so it overlays
  instead of being in between navbar and content */
  grid-template-rows: auto 0 1fr;
  color: var(--text-color);
  background-color: var(--bg-color);
  font-family: var(--font-family);
}

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

main {
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr;
}
</style>

<style scoped>
.container {
  max-width: 900px;
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

.wrapper {
  overflow: hidden;
}
</style>
